useTextField

Provides the behavior and accessibility implementation for a text field.

Example

TextField.tsx

TextField.css

Form.css

Example

TextField.tsx

TextField.css

Form.css

import {TextField} from './TextField';

<TextField label="Email" />

API

<TextField>
  <Label />
  <Input /> or <TextArea />
  <Text slot="description" />
  <FieldError />
</TextField>

useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(props: AriaTextFieldOptions<T>, ref: TextFieldRefObject<T>): TextFieldAria<T>

Name	Type	Default
`enterKeyHint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	Default: —
An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
`isDisabled`	`boolean`	Default: —
Whether the input is disabled.
`isReadOnly`	`boolean`	Default: —
Whether the input can be selected but not changed by the user.
`placeholder`	`string`	Default: —
Temporary text that occupies the text input when it is empty.
`type`	`'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}`	Default: `'text'`
The type of input to render. See MDN.
`inputMode`	`'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'`	Default: —
Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.
`autoCorrect`	`string`	Default: —
An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See MDN.
`spellCheck`	`string`	Default: —
An enumerated attribute that defines whether the element may be checked for spelling errors. See MDN.

`value`	`string`	Default: —
The current value (controlled).
`defaultValue`	`string`	Default: —
The default value (uncontrolled).
`onChange`	`(value: T) => void`	Default: —
Handler that is called when the value changes.

Name	Type
`inputProps`	`TextFieldInputProps<TextFieldIntrinsicElements>`
Props for the input element.
`labelProps`	`DOMAttributes \| LabelHTMLAttributes<HTMLLabelElement>`
Props for the text field's visible label element, if any.
`descriptionProps`	`DOMAttributes`
Props for the text field's description element, if any.
`errorMessageProps`	`DOMAttributes`
Props for the text field's error message element, if any.
`validationDetails`	`ValidityState`
The native validation details for the input.