TextField

TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

Preview

Code

This is a label for a field

This is a description for a field

Examples

Disabled

Preview

Code

This is a label for a field

This is a description for a field

Invalid

Preview

Code

This is a label for a field

This is a description for a field

Read only

Preview

Code

This is a label for a field

This is a description for a field

Props

Name	Type	Default
`isInvalid`	`boolean`	—
`isDisabled`	`boolean`	—
`autoFocus`	`boolean`	—
`onFocus`	`((e: FocusEvent<HTMLInputElement, Element>) => void)`	—
`onBlur`	`((e: FocusEvent<HTMLInputElement, Element>) => void)`	—
`onFocusChange`	`((isFocused: boolean) => void)`	—
`onKeyDown`	`((e: KeyboardEvent) => void)`	—
`onKeyUp`	`((e: KeyboardEvent) => void)`	—
`id`	`string`	—
`type`	`(string & {})` \| `"search"` \| `"text"` \| `"tel"` \| `"url"` \| `"email"` \| `"password"`	—
`excludeFromTabOrder`	`boolean`	—
`name`	`string`	—
`value`	`string`	—
`pattern`	`string`	—
`defaultValue`	`string`	—
`enterKeyHint`	`"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"search"` \| `"send"`	—
`spellCheck`	`string`	—
`autoCorrect`	`string`	—
`inputMode`	`"none"` \| `"search"` \| `"text"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"`	—
`onCopy`	`ClipboardEventHandler<HTMLInputElement>`	—
`onCut`	`ClipboardEventHandler<HTMLInputElement>`	—
`onPaste`	`ClipboardEventHandler<HTMLInputElement>`	—
`onCompositionEnd`	`CompositionEventHandler<HTMLInputElement>`	—
`onCompositionStart`	`CompositionEventHandler<HTMLInputElement>`	—
`onCompositionUpdate`	`CompositionEventHandler<HTMLInputElement>`	—
`onChange`	`((value: string) => void)`	—
`onBeforeInput`	`FormEventHandler<HTMLInputElement>`	—
`onInput`	`FormEventHandler<HTMLInputElement>`	—
`onSelect`	`ReactEventHandler<HTMLInputElement>`	—
`isReadOnly`	`boolean`	—
`isRequired`	`boolean`	—
`validate`	`((value: string) => true` \| `ValidationError` \| `null)`	—
`minLength`	`number`	—
`maxLength`	`number`	—
`autoComplete`	`string`	—
`validationBehavior`	`"native"` \| `"aria"`	`'native'`
`slot`	`string` \| `null`	—
`children`	`ReactNode` \| `((values: TextFieldRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	—
`className`	`string` \| `((values: TextFieldRenderProps & { defaultClassName: string; }) => string)`	—
`style`	`CSSProperties` \| `((values: TextFieldRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	—
`ref`	`ForwardedRef<HTMLInputElement>`	—