Text Input Field
Text Field allows users to input text into a UI. It is commonly used in forms and dialogs.
Last updated
Text Field allows users to input text into a UI. It is commonly used in forms and dialogs.
Last updated
Text fields are used in forms and input scenarios where users need to provide information such as names, addresses, passwords, or search queries. They are versatile and can be applied in various contexts, including modal windows, standalone forms, and inline editing.
A text field component typically includes a label, an input area, and optional helper or placeholder text to guide the user. It can display different states—such as focused, filled, or error—to indicate its current status. Text fields are a core interactive element, designed to capture user input accurately and efficiently.
aria_label
The ARIA label for accessibility. It provides a textual description of the input field for screen readers to improve accessibility for users with disabilities.
string
component_mode
Defines the mode in which the component should behave (e.g., 'edit', 'view'). This can be used for switching between different states or appearances.
string
custom_class
A custom CSS class that can be applied to the input container for further customization of the component's styling.
string
error_message
The message displayed when the input has a validation error, informing the user what went wrong.
string
helper_text
Additional text that can be shown below the input field, often used to provide helpful information or guidance to the user.
string
input_id
The unique identifier for the input field. It is used for associating the label with the input and can also be used for targeting the field programmatically.
string
input_status
Indicates the status of the input field, such as 'valid', 'invalid', 'disabled', etc., which affects the field's styling or interaction.
string
label
The label text displayed for the input field. It helps users understand the purpose of the input.
string
placeholder
The placeholder text that appears in the input field when it is empty. This provides a hint for what type of input is expected.
string
size
Specifies the size of the input field, typically values like 'small', 'medium', or 'large'. This adjusts the width or height of the input to fit the design.
string
type
Specifies the type of input, such as 'text', 'password', 'email', etc. It determines the input field's behavior and appearance.
string
validation_type
Defines the type of validation applied to the input field (e.g., 'required', 'email', 'minLength', etc.). It is used to determine the visual style or validation behavior.
string
value
The current value of the input field. It represents what the user has entered or is displayed in the field.
string
Label: The descriptive text indicating the purpose of the input field.
Placeholder: Temporary text within the input field that gives a hint about the expected input format or content.
Lead-Icon: An optional icon before the input field that provides additional context or helps identify the type of input.
Caption: Additional helper or instructional text below the input field to guide the user.
Trail-Text: Text at the end of the input field that often shows a character count, limit, or related information.
Use clear and concise labels that describe the expected input.
Don't use ambiguous or unclear labels.
Provide placeholder text to give users an example of the expected input format.
Don't rely solely on placeholder text for essential instructions.
Ensure text fields are large enough to be easily tappable or clickable.
Avoid making text fields too small to interact with comfortably.
Use helper text to provide additional context or instructions.
Don't overload the text field with too much information.
Ensure text fields have a visible focus state to aid keyboard navigation.
Don't ignore accessibility requirements, such as contrast and focus indicators.
Validate input and provide clear error messages when necessary.
Don't provide generic error messages that don't help users understand the issue.
Keep consistent styling and spacing across all text fields in the application.
Don't use inconsistent styles that may confuse users.
Label: Indicates whether the text field should have a visible label. Labels help users understand what information is expected.
Value: The actual text input by the user or the default value displayed in the text field.
Placeholder: Text displayed inside the text field when it is empty, providing a hint to the user about the expected input.
HelperText: Additional text that provides more information or instructions about the text field.
Unfilled: Default state when the text field is empty and not focused.
Focused-Filled: State when the text field is filled and focused.
Filled: State when the text field is filled but not focused.
Error: State indicating that there is an error with the input.
Disabled: State indicating that the text field is not interactive.
Focused-Unfilled: State when the text field is empty but focused.
Default: Standard size for most use cases.
Small: Smaller variant for compact spaces or less prominent input fields.
No: Default state with no background.
Yes: Background enabled for additional emphasis or aesthetic purposes.
