Text Field

Single-line text input for user data entry

The Text Field component allows users to enter single-line text input.

Text fields are used for collecting short text input from users, such as names, emails, or search queries.

  • Single-line text input
  • Placeholder text support
  • Validation and error states
  • Helper text
  • Label support

Basic Text Field

example.tsx
<TextInput
    id="email"
    labelText="Email"
    placeholder="Enter your email"
/>

Text Field with Helper Text

example.tsx
<TextInput
    id="password"
    labelText="Password"
    type="password"
    helperText="Must be at least 8 characters"
/>
  • Always provide clear labels
  • Use placeholder text to show expected format
  • Provide helper text for complex inputs
  • Validate input in real-time when possible