Use a TextInput to allow users to input short free-form text. It may also be used as a number input when type="number" is passed to the component.
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput />
</FormControl>
<FormControl required>
<FormControl.Label>Label</FormControl.Label>
<TextInput />
</FormControl>
Adjust input size based on context; use smaller sizes in compact spaces, larger sizes in open spaces or feels out of proportion with adjacent large elements.
<Stack direction="horizontal">
<FormControl>
<FormControl.Label>Small</FormControl.Label>
<TextInput size="small" />
</FormControl>
<FormControl>
<FormControl.Label>Medium (default)</FormControl.Label>
<TextInput />
</FormControl>
<FormControl>
<FormControl.Label>Large</FormControl.Label>
<TextInput size="large" />
</FormControl>
</Stack>
Use a monospace font for code-related inputs, like configuration tokens.
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput monospace value="Value" />
</FormControl>
When loading, the spinner replaces a visual without shifting layout. Control which side displays the loading indicator as needed.
The TextInput component has internal logic to decide which visual to replace, but it can be overridden and explicitly set to show at the start or end of the input.
Overridden spinner position
<Stack gap="spacious">
<div>
<div>Default spinner position</div>
<Stack>
<FormControl>
<FormControl.Label>No leading/trailing visual</FormControl.Label>
<TextInput loading />
</FormControl>
<FormControl>
<FormControl.Label>Leading visual</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} loading />
</FormControl>
<FormControl>
<FormControl.Label>Trailing visual</FormControl.Label>
<TextInput trailingVisual={CalendarIcon} loading />
</FormControl>
<FormControl>
<FormControl.Label>Both visuals</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} loading />
</FormControl>
</Stack>
</div>
<div>
<div>Overridden spinner position</div>
<Stack>
<FormControl>
<FormControl.Label>Leading</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} loading loaderPosition="leading" />
</FormControl>
<FormControl>
<FormControl.Label>Trailing</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} loading loaderPosition="trailing" />
</FormControl>
</Stack>
</div>
</Stack>
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput />
<FormControl.Caption>This is a caption</FormControl.Caption>
</FormControl>
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput />
<FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>
Leading and trailing visuals, typically icons, clarify input purpose. For context, prefer icons but use text (e.g., “$” or “%”) if helpful.
Avoid overwhelming the TextInput by using both a leading and trailing visual. If you're trying to provide more context about the input, consider using text in the input caption.
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput leadingVisual={CheckIcon} />
</FormControl>
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput trailingVisual={CheckIcon} />
</FormControl>
Use a trailing action button (e.g., clear button) without a label when possible. Avoid using it alongside a trailing visual.
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<TextInput
trailingAction={
<TextInput.Action
onClick={() => {
alert('Fake clear the input')
}}
icon={XCircleFillIcon}
aria-label="Clear input"
/>
}
/>
</FormControl>
See the TextInput Storybook stories
Loading data for text_input...