Text Field

A single line input for text.

A text field is a single line input for text.

<TextField
  id="username"
  name="username"
  label="Username"
  autoComplete="username"
/>

Input types

The text field component supports the following input types:

  • type="text" (default)
  • type="email"
  • type="password"
  • type="tel"
  • type="url"

Text

Email

Password

Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.

Validation

Text fields support the same validation functions as the other form elements. See the validation documentation for more details.

<TextField
  id="username"
  name="username"
  label="Username"
  validate={(value) => {
    if (!value) {
      return 'Please enter your username';
    } else if (value.length < 3) {
      return 'Username must be at least 3 characters long';
    }
  }}
  isRequired
/>

Other props

icon

An icon can be added to the text field

Please enter your username
<TextField
  id="username"
  name="username"
  label="Username"
  icon={<RiUser3Line size={18} />}
  description="Please enter your username"
/>

description

A description can be added to the text field to provide additional information to the user.

Please enter your username
<TextField
  id="username"
  name="username"
  label="Username"
  description="Please enter your username"
/>

defaultValue

You can set the default value of the text field with the defaultValue prop.

<TextField
  id="username"
  name="username"
  label="Username"
  defaultValue="John Doe"
/>

isRequired

A text field can be marked as required by setting the isRequired prop to true.

Please enter your username
<TextField
  id="username"
  name="username"
  label="Username"
  description="Please enter your username"
  isRequired
/>

isInvalid

When rendered inside a form, the text field will automatically enter an invalid state and display the field error message defined by the validation function. However, it is also possible to manually set the invalid state by setting the isInvalid prop to true and pass an errorMessage prop.

Please enter your usernamePlease enter a valid username
<TextField
  id="username"
  name="username"
  label="Username"
  description="Please enter your username"
  errorMessage="Please enter a valid username"
  isInvalid
  isRequired
/>

Props

Extends the ComponentProps<'input'>

PropTypeDescription
labelReactNodeThe label of the text field.
descriptionReactNodeThe description of the text field.
errorMessagestringThe error message to display when the text field is invalid.
isRequiredbooleanWhether the text field is required.
isInvalidbooleanWhether the text field is invalid.
validate(value: string) => string | undefinedThe validation function to use for the text field.
autoCompletestringThe autocomplete attribute to use for the text field.
type'text' | 'email' | 'password' | 'tel' | 'url'The type of the text field.
defaultValuestringThe default value of the text field.
valuestringThe value of the text field.
onChange(event: React.ChangeEvent<HTMLInputElement>) => voidThe onChange handler to use for the text field.
onBlur(event: React.FocusEvent<HTMLInputElement>) => voidThe onBlur handler to use for the text field.
onFocus(event: React.FocusEvent<HTMLInputElement>) => voidThe onFocus handler to use for the text field.