Input
A native input element that automatically works with Field.
View as MarkdownAnatomy
Import the component and use it as a single part:
import { Input } from '@base-ui-components/react/input';
<Input />
API reference
defaultValue
Union
Union
- Name
- Type
string | number | string[]
onValueChange
function
function
- Name
- Description
Callback fired when the
value
changes. Use when controlled.- Type
((value: string, event: Event) => void)
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Input.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Input.State) => ReactElement)
data-disabled
Present when the input is disabled.
data-valid
Present when the input is in valid state.
data-invalid
Present when the input is in invalid state.
data-dirty
Present when the input's value has changed.
data-touched
Present when the input has been touched.
data-filled
Present when the input is filled.
data-focused
Present when the input is focused.