This component should only be used for entering email addresses. If some other type of text data needs to be entered, use the ba-input-text or ba-input-textarea components.
Always use the label attribute to give a meaningful label to the field.
Further reading:
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Placeholders on inputs are not supported in BAgel because they create accessibility challenges, such as failing to provide persistent labels for screen readers, reducing color contrast for users with visual impairments, and causing confusion for those with cognitive difficulties.
If you would like to add a infomations to help the user fill the input, you can use the hint-text attribute.
Further reading:
The autocomplete attribute is set to 'email' by default. This means that the browser will show autofill suggestions for email addresses.
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autocomplete
|
autocomplete |
The autocomplete setting | string | undefined |
'email' |
hintText
|
hint-text |
Hint text to show above the input | string | undefined |
undefined |
invalid
|
invalid |
Whether the input is invalid | boolean | undefined |
false |
label
(required)
|
label |
A label for the input | string |
undefined |
name
|
name |
The name of the input | string | undefined |
undefined |
required
|
required |
Whether the input is required | boolean | undefined |
false |
value
|
value |
The value of the input | string | undefined |
'' |
Events
| Event | Description | Type |
|---|---|---|
baBlur |
Emitted when the input loses focus. | CustomEvent<void> |
baFocus |
Emitted when the input has focus. | CustomEvent<void> |
baOnInput |
Emitted when a keyboard input ocurred. | CustomEvent<KeyboardEvent> |
baSubmit |
Emitted when the user submits the form from within the component | CustomEvent<void> |
Methods
isValid() => Promise<boolean>
An exposed method for triggering the inputs required validation
reset() => Promise<void>
Resets the input back to its initial value
Returns
Type: Promise<void>
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"error" |
Element will be rendered in the error slot | <p> |
Parent components
ba-input-email can be slotted into:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑form‑group‑dropdown><ba‑grid>
Usage
Basic usage
<ba-input-email label="Label text" name="email" required></ba-input-email>
Help text
It is sometimes useful to add hint text.
<ba-input-email label="Label text" name="email" hint-text="Custom hint text" required></ba-input-email>
Error messages
It is sometimes useful to add custom validation messages. For example you may wish to:
- Add translations
- Provide more detail and/or contextual advice
- Add links to further information on the error
We do provide error messages with translations for:
- required
- not a valid email address
<ba-input-email label="Label text" name="email" hint-text="Custom hint text" required>
<p slot="error">We need to know this. <a href="#">Why we need to know</a>
</p>
</ba-input-email>