ba-input-text

A form field for entering small amounts of text

<ba-input-text label="Label text" name="firstName" hint-text="Custom hint text" required></ba-input-text>

This component should only be used for entering small amounts of text such as names or parts of an address. If more text is required to be entered use the ba-input-textarea component.

Always use the label attribute to give a meaningful label to the field.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`autocomplete`	`autocomplete`	The autocomplete setting	`string \| undefined`	`'on'`
`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`
`maxLength`	`max-length`	Max amount of characters allowed in validation	`string \| undefined`	`undefined`
`minLength`	`min-length`	Min amount of characters allowed in validation	`string \| undefined`	`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>`
`"error-required"`	Element will be rendered in the error-required slot	`<p>`
`"error-min-length"`	Element will be rendered in the error-min-length slot	`<p>`
`"error-max-length"`	Element will be rendered in the error-max-length slot	`<p>`

Parent components

ba-input-text can be slotted into:

Usage

Basic usage

A simple text input

<ba-input-text label="Label text" name="input-text" required></ba-input-text>

Help text

It is sometimes useful to add hint text.

A text input that has hint text

<ba-input-text label="Label text" name="input-text" hint-text="Custom hint text" required></ba-input-text>

Validation

Min/max characters

You can specify a minimum and maximum length of characters.

Specifying a minimum and maximum length of characters

<ba-input-text name="text-input" label="Input text" min-length="2" max-length="6"></ba-input-text>

Required

You can set the field to be required

Setting the field as required

<ba-input-text name="text-input" label="Input text" required></ba-input-text>

Custom Error messages

BAgel provides error messages with translations for:

Required
Minimum length of characters
Maximum length of characters

These can be customised using slots.

Specifying custom validation errors

<ba-input-text name="text-input" label="Input text" required min-length="2" max-length="6">
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
</ba-input-text>

Override all error messages

You can override all error messages with the error slot.

Overriding all error messages

<ba-input-text name="text-input" label="Input text" required min-length="2" max-length="6">
  <p slot="error">This will override all error messages</p>
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
</ba-input-text>

Custom validation

You can provide your own custom validation using events and props.

Custom validation

<ba-input-text name="text-input" label="Input text" required>
  <p slot="error">Custom error message</p>
</ba-input-text>

<script>
  const textInput = document.querySelector('ba-input-text');
  textInput.addEventListener('baOnInput', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    textInput.setAttribute('invalid')
  })
</script>