Resources
Intro & Anatomy
Text inputs are form controls that enable users to enter and edit single lines of text or specific data types.
Use text inputs for collecting user information such as names, addresses, or single-line responses where users need to provide typed input.
Text inputs can be configured for specific data types including passwords, phone numbers, dates and email addresses. Text inputs can also feature an auto complete function.
Options & Styles
Label & Helpers
Label is always required to provide clear context for expected input.
Hint is optional and provides additional guidance or examples.
Counter is optional and shows character limits or current count.
Icon is optional and should only be used when it provides additional benefit.
Input Values
Input value displays the user's entered text or data.
Placeholder is optional and provides example formatting or expected content.
Validation
Text inputs provide visual feedback during validation processes:
Validating (loading) shows when input is being processed or checked
Success indicates valid input that meets requirements
Error highlights invalid input with specific guidance for correction
States
Text inputs have multiple interactive states:
Default for standard input appearance
Hover for interactive feedback when users engage with the field
Error for validation failures requiring user attention
Disabled
Disabled text inputs show that a field exists but isn't currently available for input, e.g. when certain conditions haven't been met or the field is temporarily unavailable.
Best Practice & Usage
Text inputs should provide clear context through labels and helpful guidance through hints and validation messages. Use text inputs for single-line data entry with appropriate formatting and validation for the expected content type.
Give each text input field an associated label to provide clear context about expected information.
While placeholders are optional, labels are not. Always include a label for each text input field.
Ask users to input single data entries per text input field.
Don't combine multiple data entries into one single text input field.
Use icons thoughtfully and only when they provide additional benefit or functionality.
Avoid using icons excessively without clear purpose.
Use hints to provide helpful information about what is expected from users.
Avoid hints that restate the same information given in the label.
Keep error messages short and focus on providing helpful solutions.
Avoid vague error messages that leave users guessing about what went wrong.
Use text input fields for single lines of text or short data entries.
Don't use text input fields for long texts such as messages. Use textarea instead.
Theming
You can customise colours, border width and radius, font styles and weights, spacings and sizes to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons.