Input field

FREE

Free and open-source React input field components built for modern applications and websites. These input fields are built using React Aria and styled with Tailwind CSS.

Input example

This is a hint text to help user.

Installation

You can add this input component using our CLI or manually:

npx untitledui@latest add input

Input examples

Below are examples and variations of this input component:

Default

This is a hint text to help user.

Disabled

This is a hint text to help user.

Invalid

This is an error message.

Sizes

This is a hint text to help user.
This is a hint text to help user.
This is a hint text to help user.

Leading icon

This is a hint text to help user.

Leading dropdown

This is a hint text to help user.

Trailing dropdown

$

This is a hint text to help user.

Leading text

https://
This is a hint text to help user.

Payment input

This is a hint text to help user.

Trailing button

This is a hint text to help user.

File upload

SVG, PNG, JPG or GIF (max. 800x400px).

Password input

Must be at least 8 characters.

Date input

Date*
mmddyyyy––––AM
This is a hint text to help user.

Number input horizontal

This is a hint text to help user.

Number input vertical

This is a hint text to help user.

Tag input

Design
Engineering
This is a hint text to help user.

Tag input outer

Design
Marketing

API reference

Import the parts and assemble them:

import { InputGroup } from "@/components/base/input/input-group";
import { InputBase } from "@/components/base/input/input";
 
<InputGroup leadingAddon={<InputGroup.Prefix />}>
    <InputBase />
</InputGroup>

HintText

Import HintText from @/components/base/input/hint-text. Renders React Aria’s Text — all of its props are supported.

HintText props
PropTypeDefaultDescription
children* (required)ReactNode—The helper text, or the error message when isInvalid is set.
isInvalidboolean—Indicates that the hint text is an error message.
size
"sm""md"
"md"Controls the hint's text size; sm renders it one step smaller. The text also shrinks automatically inside a small input field.
Props from React Aria Components (2)
HintText inherited props
PropTypeDefaultDescription
elementTypestring——
renderDOMRenderFunction<any, any>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

Input

Renders TextField.

Input props
PropTypeDefaultDescription
labelstring—Label text for the input.
hintReactNode—Helper text displayed below the input.
hideRequiredIndicatorboolean—Whether to hide required indicator from label.
tooltipstring—Tooltip message on hover.
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
iconClassNamestring—Class name for the icon.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
shortcutstring | boolean—Keyboard shortcut to display.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the input, its icon, tooltip and shortcut.
iconComponentType<HTMLAttributes<HTMLOrSVGElement>>—Icon component to display on the left side of the input.
inputClassNamestring—Class name for the input.
Props from React Aria (51)
Input inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
autoCorrectstring—An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide.
inputMode
"none""search""text""url""tel""email""numeric""decimal"
—Hints at the type of data that might be entered by the user while editing the element or its contents.
maxLengthnumber—The maximum number of characters supported by the input.
minLengthnumber—The minimum number of characters required by the input.
patternstring—Regex pattern that the value of the input must match to be valid.
spellCheckstring—An enumerated attribute that defines whether the element may be checked for spelling errors.
type(string & {}) | "search" | "text" | "url" | "tel" | "email" | "password""text"The type of input to render.
defaultValuestring—The default value (uncontrolled).
enterKeyHint
"enter""done""go""next""previous""search""send"
—An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards.
idstring—The element's unique identifier.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
onChange((value: string) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
validate((value: string) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuestring—The current value (controlled).
styleStyleOrFunction<TextFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<TextFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<TextFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TextFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-errormessagestring—Identifies the element that provides an error message for the object.
aria-activedescendantstring—Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-autocomplete
"list""none""inline""both"
—Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-haspopup
falsetrue"false""true""menu""listbox""tree""grid""dialog"
—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputBase

Renders React Aria’s Group — all of its props are supported.

InputBase props
PropTypeDefaultDescription
tooltipstring—Tooltip message on hover.
isInvalidboolean—Whether the input is invalid.
isDisabledboolean—Whether the input is disabled.
isRequiredboolean—Whether the input is required.
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
iconClassNamestring—Class name for the icon.
inputClassNamestring—Class name for the input.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
shortcutstring | boolean—Keyboard shortcut to display.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the input, its icon, tooltip and shortcut.
iconComponentType<HTMLAttributes<HTMLOrSVGElement>>—Icon component to display on the left side of the input.
Props from React Aria (6)
InputBase inherited props
PropTypeDefaultDescription
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
styleStyleOrFunction<InputRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
classNameClassNameOrFunction<InputRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"input", InputRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard React DOM event handlers, all standard HTML attributes, all standard input attributes, all aria-* attributes.

InputDate

Import InputDate from @/components/base/input/input-date. Renders React Aria’s DateField — all of its props are supported.

InputDate props
PropTypeDefaultDescription
labelstring—Label text for the input.
hintReactNode—Helper text displayed below the input.
hideRequiredIndicatorboolean—Whether to hide required indicator from label.
inputClassNamestring—Class name for the input.
tooltipstring—Tooltip message on hover.
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
iconClassNamestring—Class name for the icon.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
shortcutstring | boolean—Keyboard shortcut to display.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the date segments, icon and tooltip.
iconComponentType<HTMLAttributes<HTMLOrSVGElement>>—Icon component to display on the left side of the input.
Props from React Aria (36)
InputDate inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
defaultValueDateValue | null—The default value (uncontrolled).
granularity
"day""hour""minute""second"
—Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideTimeZonebooleanfalseWhether to hide the time zone abbreviation.
hourCycle
1224
—Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
idstring—The element's unique identifier.
isDateUnavailable((date: DateValue) => boolean)—Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
maxValueDateValue | null—The maximum allowed date that a user may select.
minValueDateValue | null—The minimum allowed date that a user may select.
onChange((value: DateValue | null) => void)—Handler that is called when the value changes.
placeholderValueDateValue | null—A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
shouldForceLeadingZerosboolean—Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
validate((value: DateValue) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valueDateValue | null—The current value (controlled).
styleStyleOrFunction<DateFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<DateFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<DateFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", DateFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputDateBase

Import InputDateBase from @/components/base/input/input-date. Renders React Aria’s Group — all of its props are supported.

InputDateBase props
PropTypeDefaultDescription
tooltipstring—Tooltip message on hover.
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
iconClassNamestring—Class name for the icon.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
shortcutstring | boolean—Keyboard shortcut to display.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the date segments, icon and tooltip.
iconComponentType<HTMLAttributes<HTMLOrSVGElement>>—Icon component to display on the left side of the input.
isInvalidboolean—Whether the input shows the error state, replacing the tooltip icon with an error icon.
isDisabledboolean—Whether the input is dimmed and cannot be edited.
Props from React Aria Components (4)
InputDateBase inherited props
PropTypeDefaultDescription
styleStyleOrFunction<DateInputRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<DateInputRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", DateInputRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputFile

Import InputFile from @/components/base/input/input-file. Renders InputGroup.

InputFile props
PropTypeDefaultDescription
size
"sm""md""lg"
"sm"The size of the input.
labelstring—Label text for the input.
hintReactNode—Helper text displayed below the input.
placeholderstring"Choose a file"Placeholder text displayed when no file is selected.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input is invalid.
isRequiredboolean—Whether the input is required.
hideRequiredIndicatorboolean—Whether to hide the required indicator from the label.
acceptedFileTypesstring[]—Specifies what mime type of files are allowed.
allowsMultipleboolean—Whether multiple files can be selected.
isLoadingboolean—Whether the file is currently uploading.
onChange((files: FileList | null) => void)—Handler when a user selects files.
classNamestring—The class name for the root element.
buttonTextstring"Upload"The text of the upload button.

InputGroup

Renders TextField.

InputGroup props
PropTypeDefaultDescription
children* (required)ReactNode—The children of the input group (i.e <InputBase />).
prefixstring—A prefix text that is displayed in the same box as the input.
leadingAddonReactNode—A leading addon that is displayed with visual separation from the input.
trailingAddonReactNode—A trailing addon that is displayed with visual separation from the input.
classNamestring—The class name to apply to the input group.
labelstring—Label text for the input.
hintReactNode—Helper text displayed below the input.
hideRequiredIndicatorboolean—Whether to hide the required indicator from the label.
size
"sm""md""lg"
"md"Input size.
iconClassNamestring—Class name for the icon.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
inputClassNamestring—Class name for the input.
Props from React Aria (49)
InputGroup inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
autoCorrectstring—An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide.
inputMode
"none""search""text""url""tel""email""numeric""decimal"
—Hints at the type of data that might be entered by the user while editing the element or its contents.
maxLengthnumber—The maximum number of characters supported by the input.
minLengthnumber—The minimum number of characters required by the input.
patternstring—Regex pattern that the value of the input must match to be valid.
spellCheckstring—An enumerated attribute that defines whether the element may be checked for spelling errors.
type(string & {}) | "search" | "text" | "url" | "tel" | "email" | "password""text"The type of input to render.
defaultValuestring—The default value (uncontrolled).
enterKeyHint
"enter""done""go""next""previous""search""send"
—An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards.
idstring—The element's unique identifier.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
onChange((value: string) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
validate((value: string) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuestring—The current value (controlled).
styleStyleOrFunction<TextFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
renderDOMRenderFunction<"div", TextFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-errormessagestring—Identifies the element that provides an error message for the object.
aria-activedescendantstring—Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-autocomplete
"list""none""inline""both"
—Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-haspopup
falsetrue"false""true""menu""listbox""tree""grid""dialog"
—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputGroup.Prefix

Renders a <span> element.

InputGroup.Prefix props
PropTypeDefaultDescription
position
"leading""trailing"
—The position of the prefix.
isDisabledboolean—Indicates that the prefix is disabled.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

InputNumber

Import InputNumber from @/components/base/input/input-number. Renders React Aria’s NumberField — all of its props are supported.

InputNumber props
PropTypeDefaultDescription
labelstring—Label text for the input.
hintReactNode—Helper text displayed below the input.
hideRequiredIndicatorboolean—Whether to hide the required indicator from the label.
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
inputClassNamestring—Class name for the input.
wrapperClassNamestring—Class name for the input wrapper.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the input and its stepper buttons.
orientation
"horizontal""vertical"
"vertical"Orientation of buttons.
Props from React Aria (45)
InputNumber inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
commitBehavior
"validate""snap"
"snap"Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.
decrementAriaLabelstring—A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
defaultValuenumber—The default value (uncontrolled).
formatOptionsIntl.NumberFormatOptions—Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
granularity
"day""hour""minute""second"
—Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
idstring—The element's unique identifier.
incrementAriaLabelstring—A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
isWheelDisabledboolean—Enables or disables changing the value with scroll.
maxValuenumber—The largest value allowed for the input.
minValuenumber—The smallest value allowed for the input.
onChange((value: number) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
stepnumber—The amount that the input value changes with each increment or decrement "tick".
validate((value: number) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuenumber—The current value (controlled).
styleStyleOrFunction<NumberFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<NumberFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<NumberFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", NumberFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputNumberBase

Import InputNumberBase from @/components/base/input/input-number. Renders React Aria’s Group — all of its props are supported.

InputNumberBase props
PropTypeDefaultDescription
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
wrapperClassNamestring—Class name for the input wrapper.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the input and its stepper buttons.
inputClassNamestring—Class name for the input.
orientation
"horizontal""vertical"
"vertical"Orientation of buttons.
Props from React Aria (44)
InputNumberBase inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
commitBehavior
"validate""snap"
"snap"Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.
decrementAriaLabelstring—A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
defaultValuenumber—The default value (uncontrolled).
formatOptionsIntl.NumberFormatOptions—Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
idstring—The element's unique identifier.
incrementAriaLabelstring—A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
isWheelDisabledboolean—Enables or disables changing the value with scroll.
maxValuenumber—The largest value allowed for the input.
minValuenumber—The smallest value allowed for the input.
onChange((value: number) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
stepnumber—The amount that the input value changes with each increment or decrement "tick".
validate((value: number) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuenumber—The current value (controlled).
styleStyleOrFunction<NumberFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<NumberFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<NumberFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", NumberFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputTags

Import InputTags from @/components/base/input/input-tags. Renders a <div> element.

InputTags props
PropTypeDefaultDescription
labelstring—Label text displayed above the input.
hintReactNode—Helper text displayed below the input.
tooltipstring—Tooltip message displayed via a help icon inside the input.
size
"sm""md""lg"
"md"Input size variant.
placeholderstring—Placeholder text for the input field.
isRequiredboolean—Whether the field is required.
isDisabledboolean—Whether the field is disabled.
isInvalidboolean—Whether the field is in an invalid/error state.
allowDuplicatesbooleanfalseWhether to allow duplicate tag values.
maxTagsnumber—Maximum number of tags allowed.
valuestring[]—Controlled value: array of tag strings.
defaultValuestring[]—Default tags for uncontrolled mode.
onChange((tags: string[]) => void)—Called when the tags array changes.
onTagAdded((tag: string) => void)—Called when a tag is added.
onTagRemoved((tag: string) => void)—Called when a tag is removed.
validate((value: string) => boolean)—Validation function for new tags. Return true to accept, false to reject.
classNamestring—Optional className for the outer container.
hideRequiredIndicatorboolean—Whether to hide the required indicator from the label.

InputTagsOuter

Import InputTagsOuter from @/components/base/input/input-tags-outer. Renders a <div> element.

InputTagsOuter props
PropTypeDefaultDescription
labelstring—Label text displayed above the input.
hintReactNode—Helper text displayed below the tags.
tooltipstring—Tooltip message displayed via a help icon inside the input.
size
"sm""md""lg"
"md"Input size variant.
placeholderstring—Placeholder text for the input field.
isRequiredboolean—Whether the field is required.
isDisabledboolean—Whether the field is disabled.
isInvalidboolean—Whether the field is in an invalid/error state.
allowDuplicatesbooleanfalseWhether to allow duplicate tag values.
maxTagsnumber—Maximum number of tags allowed.
valuestring[]—Controlled value: array of tag strings.
defaultValuestring[]—Default tags for uncontrolled mode.
onChange((tags: string[]) => void)—Called when the tags array changes.
onTagAdded((tag: string) => void)—Called when a tag is added.
onTagRemoved((tag: string) => void)—Called when a tag is removed.
validate((value: string) => boolean)—Validation function for new tags. Return true to accept, false to reject.
classNamestring—Optional className for the outer container.
hideRequiredIndicatorboolean—Whether to hide the required indicator from the label.

PaymentInput

Import PaymentInput from @/components/base/input/input-payment. Renders TextField.

PaymentInput props
PropTypeDefaultDescription
labelstring—Label text for the input.
hintReactNode—Helper text displayed below the input.
hideRequiredIndicatorboolean—Whether to hide required indicator from label.
tooltipstring—Tooltip message on hover.
size
"sm""md""lg"
"md"Input size.
placeholderstring—Placeholder text.
iconClassNamestring—Class name for the icon.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
shortcutstring | boolean—Keyboard shortcut to display.
groupRefRef<HTMLDivElement>—Ref for the group element that wraps the input, its icon, tooltip and shortcut.
iconComponentType<HTMLAttributes<HTMLOrSVGElement>>—Icon component to display on the left side of the input.
inputClassNamestring—Class name for the input.
Props from React Aria (51)
PaymentInput inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
autoCorrectstring—An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide.
inputMode
"none""search""text""url""tel""email""numeric""decimal"
—Hints at the type of data that might be entered by the user while editing the element or its contents.
maxLengthnumber19The maximum number of characters supported by the input.
minLengthnumber—The minimum number of characters required by the input.
patternstring—Regex pattern that the value of the input must match to be valid.
spellCheckstring—An enumerated attribute that defines whether the element may be checked for spelling errors.
type(string & {}) | "search" | "text" | "url" | "tel" | "email" | "password""text"The type of input to render.
defaultValuestring—The default value (uncontrolled).
enterKeyHint
"enter""done""go""next""previous""search""send"
—An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards.
idstring—The element's unique identifier.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
onChange((value: string) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
validate((value: string) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuestring—The current value (controlled).
styleStyleOrFunction<TextFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<TextFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<TextFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TextFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-errormessagestring—Identifies the element that provides an error message for the object.
aria-activedescendantstring—Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-autocomplete
"list""none""inline""both"
—Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-haspopup
falsetrue"false""true""menu""listbox""tree""grid""dialog"
—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

PinInput

Import PinInput from @/components/base/input/pin-input. Renders a <div> element.

PinInput props
PropTypeDefaultDescription
size
"xxxs""xxs""xs""sm""md""lg"
"md"Sets the dimensions, corner radius and type scale of every slot, plus the gap between them. Shared with the sub-components through context.
disabledbooleanfalseWhether the pin cannot be edited. Disables the underlying input and dims the slots.
invalidbooleanfalseWhether the entered pin failed validation. Renders the slots in the error style and marks each one aria-invalid.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Description

Import PinInput from @/components/base/input/pin-input and use it as PinInput.Description. Renders HintText.

PinInput.Description props
PropTypeDefaultDescription
children* (required)ReactNode—The helper text, or the error message when isInvalid is set.
isInvalidboolean—Indicates that the hint text is an error message.
size
"sm""md"
—Controls the hint's text size; sm renders it one step smaller. The text also shrinks automatically inside a small input field.
Props from React Aria Components (2)
PinInput.Description inherited props
PropTypeDefaultDescription
elementTypestring——
renderDOMRenderFunction<any, any>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Group

Import PinInput from @/components/base/input/pin-input and use it as PinInput.Group. Renders OTPInput.

PinInput.Group props
PropTypeDefaultDescription
inputClassNamestring—Additional classes for the hidden text input that sits behind the slots and receives the typing.
Props from input-otp (11)
PinInput.Group inherited props
PropTypeDefaultDescription
containerClassNamestring——
maxLengthnumber4—
noncestring——
noScriptCSSFallbackstring | null——
onChange((newValue: string) => unknown)——
onComplete((...args: any[]) => unknown)——
pasteTransformer((pasted: string) => string)——
pushPasswordManagerStrategy
"none""increase-width"
——
textAlign
"center""left""right"
——
valuestring——
renderInputOTPRenderFn——

Also accepts all standard React DOM event handlers, all standard HTML attributes, all standard input attributes, all aria-* attributes.

PinInput.Label

Import Label from @/components/base/input/label. Renders React Aria’s Label — all of its props are supported.

PinInput.Label props
PropTypeDefaultDescription
children* (required)ReactNode—The label text, rendered before the required asterisk and the tooltip trigger.
isInvalidboolean—Whether the required asterisk is tinted with the error color. When left undefined, it follows the invalid state of the surrounding field instead.
isRequiredboolean—Whether the required asterisk is shown. When left undefined, it appears only if the surrounding field is marked required.
tooltipstring—Title text for a help tooltip. Setting it renders a help icon after the label that stays interactive even when the field is disabled.
tooltipDescriptionstring—Supporting text shown under the tooltip title. Only rendered when tooltip is set.
Props from React Aria Components (4)
PinInput.Label inherited props
PropTypeDefaultDescription
elementTypestring——
formstring——
htmlForstring——
renderDOMRenderFunction<"label", undefined>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Label

Import PinInput from @/components/base/input/pin-input and use it as PinInput.Label. Renders Label.

PinInput.Label props
PropTypeDefaultDescription
children* (required)ReactNode—The label text, rendered before the required asterisk and the tooltip trigger.
isInvalidboolean—Whether the required asterisk is tinted with the error color. When left undefined, it follows the invalid state of the surrounding field instead.
isRequiredboolean—Whether the required asterisk is shown. When left undefined, it appears only if the surrounding field is marked required.
tooltipstring—Title text for a help tooltip. Setting it renders a help icon after the label that stays interactive even when the field is disabled.
tooltipDescriptionstring—Supporting text shown under the tooltip title. Only rendered when tooltip is set.
Props from React Aria Components (4)
PinInput.Label inherited props
PropTypeDefaultDescription
elementTypestring——
formstring——
htmlForstring——
renderDOMRenderFunction<"label", undefined>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Separator

Import PinInput from @/components/base/input/pin-input and use it as PinInput.Separator. Renders a <div> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

PinInput.Slot

Import PinInput from @/components/base/input/pin-input and use it as PinInput.Slot. Renders a <div> element.

PinInput.Slot props
PropTypeDefaultDescription
index* (required)number—Zero-based position of the slot in the group. Selects which character of the entered value it displays, whether it shows the caret, and what its aria-label announces.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

TextField

Renders React Aria’s TextField — all of its props are supported.

TextField props
PropTypeDefaultDescription
size
"sm""md""lg"
"md"Input size.
iconClassNamestring—Class name for the icon.
wrapperClassNamestring—Class name for the input wrapper.
tooltipClassNamestring—Class name for the tooltip.
inputClassNamestring—Class name for the input.
Props from React Aria (51)
TextField inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<HTMLInputElement, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
autoCorrectstring—An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide.
inputMode
"none""search""text""url""tel""email""numeric""decimal"
—Hints at the type of data that might be entered by the user while editing the element or its contents.
maxLengthnumber—The maximum number of characters supported by the input.
minLengthnumber—The minimum number of characters required by the input.
patternstring—Regex pattern that the value of the input must match to be valid.
spellCheckstring—An enumerated attribute that defines whether the element may be checked for spelling errors.
type(string & {}) | "search" | "text" | "url" | "tel" | "email" | "password""text"The type of input to render.
defaultValuestring—The default value (uncontrolled).
enterKeyHint
"enter""done""go""next""previous""search""send"
—An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards.
idstring—The element's unique identifier.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
onChange((value: string) => void)—Handler that is called when the value changes.
onCompositionEndCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system completes or cancels the current text composition session.
onCompositionStartCompositionEventHandler<HTMLInputElement>—Handler that is called when a text composition system starts a new text composition session.
onCompositionUpdateCompositionEventHandler<HTMLInputElement>—Handler that is called when a new character is received in the current text composition session.
validate((value: string) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valuestring—The current value (controlled).
styleStyleOrFunction<TextFieldRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<TextFieldRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<TextFieldRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TextFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-errormessagestring—Identifies the element that provides an error message for the object.
aria-activedescendantstring—Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-autocomplete
"list""none""inline""both"
—Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-haspopup
falsetrue"false""true""menu""listbox""tree""grid""dialog"
—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
onBeforeInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is about to be modified.
onCopyClipboardEventHandler<HTMLInputElement>—Handler that is called when the user copies text.
onCutClipboardEventHandler<HTMLInputElement>—Handler that is called when the user cuts text.
onInputFormEventHandler<HTMLInputElement>—Handler that is called when the input value is modified.
onPasteClipboardEventHandler<HTMLInputElement>—Handler that is called when the user pastes text.
onSelectReactEventHandler<HTMLInputElement>—Handler that is called when text in the input is selected.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

Set isInvalid and pass the error message as hint. The hint switches to error styling, the ring turns to the error color, and an error icon appears on the right side of the field (except on type="password" inputs, where that spot holds the visibility toggle).

Yes. Pass an icon component to the icon prop, for example icon={Mail01} from @untitledui/icons. It renders on the left side of the input, and you can style it with iconClassName.

Input supports "sm", "md" and "lg" through the size prop. The default is "md".

Use the tooltip prop to show a help icon on the right that reveals the text on hover, and the hint prop for persistent text below the field. The tooltip icon is hidden while the input is invalid and is not rendered on password inputs.

Yes. Wrap an InputBase (not Input) in InputGroup and pass a node to leadingAddon or trailingAddon; the examples use a Button or a NativeSelect. For static text addons such as https://, pass <InputGroup.Prefix> as the addon, and use the prefix string prop for text shown inside the field, such as $. There is no suffix prop.

Give each Input a name so its value is included in the form data on submit. For controlled state pass value and onChange, which receives the new string directly rather than an event; use defaultValue for uncontrolled fields.

Pass a string to the shortcut prop to display custom text, or true to show the default "⌘K". The badge is display only and hidden below the md breakpoint, so you still need to register the key handler that focuses the input yourself.

IllustrationsMobile app store buttons