TextField()

TextField(__namedParameters): Element

TextField - A complete form field component with label, input, and validation

Provides a comprehensive form field experience combining label, input, description, and error message components. Handles validation states and accessibility automatically while supporting extensive customization through styling props.

Parameters

__namedParameters

TextFieldProps

Returns

Element

Examples

// Basic text field with label and required validation
<TextField label='Full Name' isRequired defaultValue='John Doe' />

// Text field with placeholder and description
<TextField
  label='Email Address'
  inputProps={{ placeholder: 'Enter your email address', type: 'email' }}
  description='We will never share your email with third parties'
/>

// Text field with prefix for currency
<TextField
  label='Price'
  inputProps={{ placeholder: '0.00', type: 'number', prefix: '$' }}
  description='Enter the price in dollars'
/>

// Text field with suffix for units
<TextField
  label='Weight'
  inputProps={{ placeholder: '0', type: 'number', suffix: 'kg' }}
  description='Enter the weight in kilograms'
/>

// Text field with both prefix and suffix
<TextField
  label='Temperature'
  inputProps={{ placeholder: '0', type: 'number', prefix: '~', suffix: '°C' }}
  description='Approximate temperature in Celsius'
/>

// Text field with error state
<TextField
  label='Username'
  isInvalid
  errorMessage='Username must be at least 3 characters long'
  inputProps={{ placeholder: 'Enter username' }}
/>

// Small size text field with clearable input
<TextField
  label='Search'
  size='small'
  inputProps={{
    placeholder: 'Type to search...',
    isClearable: true,
    type: 'search'
  }}
/>

// Disabled text field
<TextField
  label='Status'
  isDisabled
  defaultValue='Inactive'
  description='This field cannot be edited'
/>

// Password field with validation
<TextField
  label='Password'
  isRequired
  inputProps={{
    type: 'password',
    placeholder: 'Enter a secure password',
    minLength: 8
  }}
  description='Password must be at least 8 characters'
/>