# auro-input The `auro-input` element provides users a way to enter data into a text field. ## Properties | Property | Attribute | Modifiers | Type | Default | Description | |------------------------------------|------------------------------------|-----------|--------------------------------------------------|-------------|--------------------------------------------------| | `a11yActivedescendant` | `a11yactivedescendant` | | `string` | | The value for the aria-activedescendant attribute.
Points to the ID of the currently active/highlighted option in a listbox. | | `a11yControls` | `a11ycontrols` | | `string` | | The value for the aria-controls attribute. | | `a11yExpanded` | `a11yexpanded` | | `boolean` | | The value for the aria-expanded attribute. | | `a11yRole` | `a11yrole` | | `string` | | The value for the role attribute. | | `activeLabel` | `activelabel` | | `boolean` | false | If set, the label will remain fixed in the active position.
Only applies to the classic/default layout; the emphasized and snowflake
layouts always render the label inside the field, so this has no effect there. | | `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. | | `autocapitalize` | `autocapitalize` | | `'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. | | `autocomplete` | `autocomplete` | | `string` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. | | `autocorrect` | `autocorrect` | | `'on' \| 'off'` | | When set to `off`, stops iOS from auto-correcting words when typed into a text box. | | `customValidityTypeEmail` | `customvaliditytypeemail` | | `string` | | Custom help text message for email type validity. | | `disabled` | `disabled` | | `boolean` | false | If set, disables the input. | | `dvInputOnly` | `dvinputonly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. | | `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. | | `errorMessage` | `errormessage` | | `string` | | Contains the help text message for the current validity error. | | `format` | `format` | | `string` | | Specifies the input mask format. | | `hasFocus` | | | `boolean` | | Flag to indicate if the input currently has focus. | | `hasValue` | | | `boolean` | false | Flag to indicate if the input currently has value. | | `icon` | `icon` | | `boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. | | `id` | `id` | | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. | | `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. | | `lang` | `lang` | | `string` | | Defines the language of an element. | | `layout` | `layout` | | `'classic' \| 'emphasized' \| 'emphasized-left' \| 'emphasized-right' \| 'snowflake' \| 'snowflake-left' \| 'snowflake-right'` | "'classic'" | Sets the layout variant of the input. | | `locale` | `locale` | | `string` | "en-US" | Defines the locale of an element.
Used for locale-specific formatting, such as date formats. | | `max` | `max` | | `string` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and ISO format. | | `maxLength` | `maxlength` | | `number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers. | | `maxObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `max` for full date formats. | | `min` | `min` | | `string` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format. | | `minLength` | `minlength` | | `number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. | | `minObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `min` for full date formats. | | `name` | `name` | | `string` | | Populates the `name` attribute on the input. | | `nested` | `nested` | | `boolean` | | Sets styles for nested operation - removes borders, hides help + error text, and
hides accents. | | `noValidate` | `novalidate` | | `boolean` | false | If set, disables auto-validation on blur. | | `onDark` | `ondark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. | | `pattern` | `pattern` | | `string` | | Specifies a regular expression the form control's value should match. | | `placeholder` | `placeholder` | | `string` | | Define custom placeholder text. | | `readonly` | `readonly` | | `boolean` | | Makes the input read-only, but can be set programmatically. | | `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. | | `setCustomValidity` | `setcustomvalidity` | | `string` | | Sets a custom help text message to display for all validityStates. | | `setCustomValidityBadInput` | `setcustomvaliditybadinput` | | `string` | | Custom help text message to display when validity = `badInput`. | | `setCustomValidityCustomError` | `setcustomvaliditycustomerror` | | `string` | | Custom help text message to display when validity = `customError`. | | `setCustomValidityForType` | `setcustomvalidityfortype` | | `string` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. | | `setCustomValidityPatternMismatch` | `setcustomvaliditypatternmismatch` | | `string` | | Custom help text message to display when validity = `patternMismatch`. | | `setCustomValidityRangeOverflow` | `setcustomvalidityrangeoverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. | | `setCustomValidityRangeUnderflow` | `setcustomvalidityrangeunderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. | | `setCustomValidityTooLong` | `setcustomvaliditytoolong` | | `string` | | Custom help text message to display when validity = `tooLong`. | | `setCustomValidityTooShort` | `setcustomvaliditytooshort` | | `string` | | Custom help text message to display when validity = `tooShort`. | | `setCustomValidityValueMissing` | `setcustomvalidityvaluemissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. | | `shape` | `shape` | | `'box' \| 'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'rounded' \| 'snowflake'` | "'classic'" | Sets the shape of the input. | | `simple` | `simple` | | `boolean` | | Simple makes the input render without a border. | | `size` | `size` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | "'lg'" | Sets the size of the input. | | `spellcheck` | `spellcheck` | | `'true' \| 'false'` | | An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. | | `type` | `type` | | `'text' \| 'password' \| 'email' \| 'credit-card' \| 'tel' \| 'number' \| 'date'` | "'text'" | Populates the `type` attribute on the input. | | `validateOnInput` | `validateoninput` | | `boolean` | | Sets validation mode to re-eval with each input. | | `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. | | `value` | `value` | | `string` | "undefined" | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format. | | `valueObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `value` for full date formats. | ## Methods | Method | Type | Description | |------------|----------------------------------------|--------------------------------------------------| | `clear` | `(): void` | Clears the input value. | | `focus` | `(): void` | Function to set element focus. | | `reset` | `(): void` | Resets component to initial state, including resetting the touched state and validity. | | `validate` | `(force?: boolean \| undefined): void` | Validates value.

**force**: Whether to force validation. | ## Events | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` value has changed. | | `auroInput-validityChange` | `CustomEvent` | Notifies that the `validity` state of the input has changed. | | `input` | `InputEvent` | Event fires when the value of an `auro-input` has been changed. | ## Slots | Name | Description | |---------------------------|--------------------------------------------------| | `ariaLabel.clear` | Sets aria-label on clear button for screen reader to read | | `ariaLabel.password.hide` | Sets aria-label on password button to toggle off showing password | | `ariaLabel.password.show` | Sets aria-label on password button to toggle on showing password | | `displayValue` | Allows custom HTML content to display in place of the value when the input is not focused. | | `helpText` | Sets the help text displayed below the input. | | `label` | Sets the label text for the input. | | `optionalLabel` | Allows overriding the optional display text "(optional)", which appears next to the label. | ## CSS Shadow Parts | Part | Description | |-----------------|--------------------------------------------------| | `accent-left` | Use for customizing the style of the left accent element (e.g. padding, margin) | | `accent-right` | Use for customizing the style of the right accent element (e.g. padding, margin) | | `accentIcon` | Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) | | `displayValue` | Use for customizing the style of the displayValue element | | `helpText` | Use for customizing the style of the helpText element | | `iconContainer` | Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) | | `input` | Use for customizing the style of the input element | | `inputHelpText` | Use for customizing the style of the input help text wrapper | | `label` | Use for customizing the style of the label element | | `wrapper` | Use for customizing the style of the root element |