TextInput
The TextInput component is composed of a label, input field, and description. It supports built-in accessibility attributes and validation states.
Import
import { TextInput } from "@cfa/react-core";Live Editor
Guidelines
When to use
- TextInput is for single-line text.
Do
- Always provide a visible label in sentence case. Placeholder text is not a label. Use placeholders only for optional format hints, never as the only label.
- Validate when people leave the field or submit the form, not on every keystroke.
Avoid
- Using TextInput for multi-line text. Use TextAreaInput.
Examples
Default
A basic TextInput with a label.
Sizes
Use the size prop to control height, padding, and typography. Options are sm, md (default), and lg. Pass size="lg" to match the previous default height.
Required
Use the isRequired prop to indicate that the field must have a value.
With Description
Provide additional context with the description prop.
With Placeholder
Use the placeholder prop to show example text when the input is empty.
Character Limit
Set a maximum character length with the maxLength prop.
Field Validation
The TextInput supports built-in validation, showing error states when needed.
Special Input Types
Configure special input types like telephone numbers with appropriate patterns.