Skip to content

Documentation

TextField

TextField is a compound component for single-line text entry.

Storybook Source Figma

Root Props

Prop	Type	Default
`size`	`TextFieldSize`	`'md'`
Visual size of the text field. Affects padding, font size, and overall height. 'sm': Compact input; 'md': Default; 'lg': Spacious layout
`error`	`boolean`	—
Shows the input in an error state.
`ref`	`Ref<HTMLDivElement>`	—
Ref forwarded to wrapper element Useful for programmatic control, focus, or integration.

Also accepts all <div> attributes.

Child Parts

TextFieldInput: native <input> element used inside the wrapper.

`TextFieldInput`

Prop	Type	Default
`ref`	`Ref<HTMLInputElement>`	—
Ref forwarded to the underlying native `<input>` element.

Also accepts all <input> attributes.

Types

TextFieldProps
TextFieldInputProps
TextFieldSize

State Model

TextField exposes size and error state through context.
Real input state is managed on TextFieldInput.
Controlled and uncontrolled behavior follow native input rules on the child input.