Text Fields

Web components for text, email, search, password and multi-line fields, the password one with a reveal toggle.

mo-field-text — A single-line text field.

mo-field-email — A text field for an email address, which offers the email keyboard on touch devices.

mo-field-password — A text field for a password, with a button that reveals it.

mo-field-search — A text field for a search term, with a search icon and a button that clears it.

mo-field-text-area — A multi-line text field.

Installation

npm install @3mo/text-fields

import '@3mo/text-fields'

Usage

<mo-field-text label='Name' value='Clarke Griffin'></mo-field-text>

Examples

• States — Required, read-only, disabled and dense.
• Length — maxLength counts down the characters left, and a value shorter than minLength is invalid.
• Pattern — pattern validates the value against a regular expression, as on a native input - type a letter.
• Slots — start and end hold text, icons or buttons beside the value.
• Text Align — The value follows the field's text-align.
• Content Sizing — With width: fit-content the field grows with its value - type a long one.

Email Field

• Default
• Default Label — Without a label the field is labelled "Email", in the page's language.
• Invalid — A value the browser does not accept as an address makes the field invalid.

Password Field

• Default
• Reveal — reveal shows the password in plain text; the eye button at the end toggles it.
• New Password — autoComplete is current-password by default; new-password lets the browser suggest a strong one.

Search Field

• Default
• Dense — Without a label the field is labelled "Search", and a dense one suits a toolbar.
• Slots — The end slot holds further actions, after the clear button.

Text Area

• Default
• Slots — start and end hold buttons beside the text.
• Length — maxLength counts down the characters left.

API

mo-field-text

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | minLength | minLength | number \| undefined | | The fewest characters a valid value has | | maxLength | maxLength | number \| undefined | | The most characters the field takes, counted down at the end | | pattern | pattern | string \| undefined | | A regular expression the value has to match, as on a native input | | autoComplete | autoComplete | FieldTextAutoComplete \| undefined | | What the browser may fill in, as the native autocomplete attribute | | selectOnFocus | selectOnFocus | boolean | false | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | string \| undefined | | The text | | label | label | string | "" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

mo-field-email

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | selectOnFocus | selectOnFocus | boolean | false | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | string \| undefined | | The value of the field. | | label | label | string | "t('Email')" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

mo-field-password

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | reveal | reveal | boolean | false | Shows the password in plain text | | minLength | minLength | number \| undefined | | The fewest characters a valid value has | | maxLength | maxLength | number \| undefined | | The most characters the field takes, counted down at the end | | pattern | pattern | string \| undefined | | A regular expression the value has to match, as on a native input | | autoComplete | autoComplete | FieldTextAutoComplete | "current-password" | current-password by default; new-password lets the browser suggest one | | selectOnFocus | selectOnFocus | boolean | false | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | string \| undefined | | The text | | label | label | string | "t('Password')" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

mo-field-search

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | minLength | minLength | number \| undefined | | The fewest characters a valid value has | | maxLength | maxLength | number \| undefined | | The most characters the field takes, counted down at the end | | pattern | pattern | string \| undefined | | A regular expression the value has to match, as on a native input | | autoComplete | autoComplete | FieldTextAutoComplete \| undefined | | What the browser may fill in, as the native autocomplete attribute | | selectOnFocus | selectOnFocus | boolean | false | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | string \| undefined | | The text | | label | label | string | "t('Search')" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

mo-field-text-area

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | minLength | minLength | number \| undefined | | The fewest characters a valid value has | | maxLength | maxLength | number \| undefined | | The most characters the field takes, counted down at the end | | pattern | pattern | string \| undefined | | A regular expression the value has to match, as on a native input | | autoComplete | autoComplete | FieldTextAutoComplete \| undefined | | What the browser may fill in, as the native autocomplete attribute | | selectOnFocus | selectOnFocus | boolean | false | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | string \| undefined | | The text | | label | label | string | "" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH