# r-input A text input form control supporting multiple input types, validation, leading/trailing slots, and native form integration. Example: ``` ``` ## class: `RInput`, `r-input` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `autocapitalize` | | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | | Controls automatic capitalization of text input on mobile devices.
\- `off` or `none`: No automatic capitalization
\- `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs)
\- `words`: Capitalize first letter of each word
\- `characters`: Capitalize all characters | | | `autocomplete` | | `"address-level1" \| "address-level2" \| "address-line1" \| "address-line2" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "cc-csc" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-name" \| "cc-number" \| "country" \| "country-name" \| "current-password" \| "email" \| "family-name" \| "given-name" \| "language" \| "name" \| "new-password" \| "off" \| "on" \| "one-time-code" \| "organization" \| "photo" \| "postal-code" \| "sex" \| "street-address" \| "tel" \| "url" \| "username" \| string & {}` | | Native `autocomplete` hint for browsers / password managers. | | | `autofocus` | | `boolean` | | Automatically focus the input when it is first rendered.
Mirrors native `autofocus` attribute behavior. Avoid using multiple times per page. | | | `badInputMessage` | | `string` | | Custom message for `badInput` (conversion / parsing failure). | | | `customErrorMessage` | | `string` | | Custom message for `customError` (applies when set via `setCustomValidity()` logic internally). | | | `disabled` | | `boolean` | | Disables the field (non-interactive, excluded from form submission). | | | `enterkeyhint` | | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send"` | | Hint for the action label/icon on the virtual keyboard's enter key.
Use cases:
\- `enter`: Default, generic newline/submit action
\- `done`: Finishes current input session (e.g., last field in a form)
\- `go`: Navigates to URL input target (e.g., URL bar)
\- `next`: Advances to next input field in a sequence
\- `previous`: Goes back to previous input field
\- `search`: Submits a search query
\- `send`: Sends a message (e.g., chat, email) | | | `error` | | `string` | | Manual error message independent of native validation messages.
When set, native validation messages are suppressed. | | | `fieldIndicator` | | `string` | | Small marker string appended to the label (e.g. “Optional”, localized markers, etc.). | | | `form` | | `string` | | ID of the form this input is associated with (mirrors native `form` attribute).
Use when the input is not a direct descendant of the target form element. | | | `fullWidth` | | `boolean` | | When true, stretches the component horizontally to fill its container. | | | `hint` | | `string` | | Optional contextual help text displayed beneath the field. | | | `inputmode` | | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | | Hint to the browser about which keyboard to display on mobile devices. | | | `internal` | | `boolean` | | When true, hides visual label & messages (for internal layout use; accessibility still preserved). | | | `invalid` | | `boolean` | | Explicit invalid state override (when set manually). | | | `label` | | `string` | | Label text describing the field. Provide for accessibility (or use the `label` slot). | | | `marker` | | `"auto" \| "invalid" \| "none" \| "valid"` | `'auto'` | Defines the validation marker strategy.
\`auto` (default) - Shows valid/invalid markers dynamically based on state and value.
\`valid` - Always shows the valid marker.
\`invalid` - Always shows the invalid marker.
\`none` - Hides the validation marker entirely. | | | `max` | | `number` | | Maximum numeric/date value (for supported types). | | | `maxlength` | | `number` | | Maximum character length (enforced by native input). | | | `min` | | `number` | | Minimum numeric/date value (for supported types). | | | `minlength` | | `number` | | Minimum character length (validation only). | | | `name` | | `string` | | Name used when contributing the value to form submission (`FormData` / POST body). | | | `novalidate` | | `boolean` | | If set, the field is skipped by built‑in (Constraint Validation API) validation logic.
Does not prevent custom validation you may trigger manually. | | | `passwordrules` | | `string` | | Safari-specific password rules for strong password generation (password inputs only).
Format: "minlength: X; required: lower; required: upper; required: digit; required: special;"
This attribute is Safari-specific and will be ignored by other browsers.
See: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules | | | `pattern` | | `any` | | Regex pattern the value must match (string form). | | | `patternMismatchMessage` | | `string` | | Custom message for `patternMismatch`. | | | `placeholder` | | `string` | | Placeholder hint text shown when the field is empty and unfocused. | | | `rangeOverflowMessage` | | `string` | | Custom message for `rangeOverflow`. | | | `rangeUnderflowMessage` | | `string` | | Custom message for `rangeUnderflow`. | | | `readonly` | | `boolean` | | Read-only mode (mirrors native `readonly`): value cannot be changed by the user,
but the field can still receive focus, be selected, and be submitted with a form. | | | `required` | | `boolean` | | Marks the field as required; failing to provide a value triggers `valueMissing`. | | | `spellcheck` | | `boolean` | | Controls browser spell-checking for text input.
When true, enables spell-checking; when false, disables it.
Browser default behavior applies when not specified. | | | `step` | | `number` | | Step interval for numeric/date input types. | | | `stepMismatchMessage` | | `string` | | Custom message for `stepMismatch`. | | | `submitOnEnter` | | `boolean` | `true` | Controls whether pressing Enter triggers implicit form submission when this input is inside a form.
Set to `false` for custom Enter behavior (for example, table filtering) without submitting the form. | | | `tooLongMessage` | | `string` | | Custom message for `tooLong`. | | | `tooShortMessage` | | `string` | | Custom message for `tooShort`. | | | `type` | | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | Input type (e.g. `text`, `email`, `number`, `password`).
See HTMLInputElement `type` for supported values. | | | `typeMismatchMessage` | | `string` | | Custom message for `typeMismatch`. | | | `valid` | | `boolean` | | Explicit valid state override (when set manually). | | | `validityMarker` | | `boolean` | `true` | When `true` field renders valid/invalid marker within. | | | `value` | | `string` | `''` | Current value. Mutable: can be changed programmatically or through user input. | | | `valueMissingMessage` | | `string` | | Custom message for `valueMissing`. | | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------- | ------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------ | -------------- | | `checkValidity` | | Validates the input without triggering UI and returns a boolean indicating its validity. | | `Promise` | | | `getSelectionEnd` | | Get the end index of the current text selection (or null if unavailable). | | `Promise` | | | `getSelectionStart` | | Get the start index of the current text selection (or null if unavailable). | | `Promise` | | | `getValue` | | Retrieve the current value (returns empty string if unset). | | `Promise` | | | `isDirty` | | Gets the dirty state (whether value has been changed by user) | | `Promise` | | | `isTouched` | | Gets the touched state (whether user has interacted with the input) | | `Promise` | | | `markAsPristine` | | Resets touched and dirty states to pristine (untouched/clean) | | `Promise` | | | `select` | | Select (highlight) the entire current input value. | | `Promise` | | | `setBlur` | | Programmatically remove focus from the native input. | | `Promise` | | | `setCustomValidity` | | Validates an element, displays provided message in case value is invalid. | `message: string` | `Promise` | | | `setFocus` | | Programmatically focus the native input element. | | `Promise` | | | `setRangeText` | | | `replacement: string, start: number, end: number, selectMode: "select" \| "start" \| "end" \| "preserve"` | `Promise` | | | `setSelectionRange` | | Set a selection (or caret) range within the value. | `start: number, end: number, direction: "none" \| "forward" \| "backward"` | `Promise` | | | `setValue` | | Set the current value programmatically (does not fire native input/change automatically). | `value: string` | `Promise` | | ### Events | Name | Type | Description | Inherited From | | -------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `rBeforeInput` | `CustomEvent` | Emitted when the input is about to be modified (mirrors native `beforeinput` semantics).
Use for intercepting and preventing input before it occurs. | | | `rBlur` | `CustomEvent` | Emitted when the input loses focus. | | | `rChange` | `CustomEvent<{ element: HTMLRInputElement; value: string; }>` | Emitted when the committed value changes (mirrors native `change` semantics). | | | `rFocus` | `CustomEvent` | Emitted when the input receives focus. | | | `rInput` | `CustomEvent<{ element: HTMLRInputElement; value: string; }>` | Emitted on each user input (mirrors native `input` semantics). | | | `rInvalid` | `CustomEvent` | Emitted when the input fails validation (mirrors native `invalid` semantics). | | | `rKeyDown` | `CustomEvent` | Emitted when a key is pressed down (mirrors native `keydown` semantics). | | | `rKeyUp` | `CustomEvent` | Emitted when a key is released (mirrors native `keyup` semantics). | | | `rReset` | `CustomEvent<{ element: HTMLRInputElement; value: string; }>` | Emitted when a parent form is reset and the field restores its initial value. | | | `rSelect` | `CustomEvent` | Emitted when text is selected (mirrors native `select` semantics). | | | `rValidate` | `CustomEvent<{ state: string; message: string; }>` | Emitted after each validation attempt (native or triggered logic). | | ### Attributes | Name | Field | Inherited From | | -------------------------- | ---------------------- | -------------- | | `autocapitalize` | autocapitalize | | | `autocomplete` | autocomplete | | | `autofocus` | autofocus | | | `bad-input-message` | badInputMessage | | | `custom-error-message` | customErrorMessage | | | `disabled` | disabled | | | `enterkeyhint` | enterkeyhint | | | `error` | error | | | `field-indicator` | fieldIndicator | | | `form` | form | | | `full-width` | fullWidth | | | `hint` | hint | | | `inputmode` | inputmode | | | `internal` | internal | | | `invalid` | invalid | | | `label` | label | | | `marker` | marker | | | `max` | max | | | `maxlength` | maxlength | | | `min` | min | | | `minlength` | minlength | | | `name` | name | | | `novalidate` | novalidate | | | `passwordrules` | passwordrules | | | `pattern` | pattern | | | `pattern-mismatch-message` | patternMismatchMessage | | | `placeholder` | placeholder | | | `range-overflow-message` | rangeOverflowMessage | | | `range-underflow-message` | rangeUnderflowMessage | | | `readonly` | readonly | | | `required` | required | | | `spellcheck` | spellcheck | | | `step` | step | | | `step-mismatch-message` | stepMismatchMessage | | | `submit-on-enter` | submitOnEnter | | | `too-long-message` | tooLongMessage | | | `too-short-message` | tooShortMessage | | | `type` | type | | | `type-mismatch-message` | typeMismatchMessage | | | `valid` | valid | | | `validity-marker` | validityMarker | | | `value` | value | | | `value-missing-message` | valueMissingMessage | | ### CSS Parts | Name | Description | | ----------- | ----------- | | `container` | | ### Slots | Name | Description | | ---------- | ------------------------------------------------------------- | | `label` | Custom label content placed above the input field | | `leading` | Leading icon or element placed inside the input on the left | | `message` | Custom hint or validation message below the input | | `popover` | Popover element attached to the label area | | `trailing` | Trailing icon or element placed inside the input on the right |

---

## Exports | Kind | Name | Declaration | Module | Package | | --------------------------- | --------- | ----------- | ------ | ------- | | `js` | `RInput` | RInput | | | | `custom-element-definition` | `r-input` | RInput | | |