Text field

<View width="300px" maxWidth="100%">
  <TextField placeholder="0 12 02 56 03" prefix="+31" />
</View>

Form fields have a required name property, so that's the only property you have to pass to TextField to start using it. If you need to handle its change events, add an onChange property to it.

<TextField
  name="email"
  placeholder="Enter your email"
  onChange={(args) => console.log(args)}
/>

Same as when using native inputs in React, TextField can be used as a controlled or uncontrolled component. By default, TextField is uncontrolled and allows you to define its default value using the defaultValue property. In this case, all change events are handled automatically. This approach is helpful when pre-filling a form from a data source, but you don't need to control the further behavior of the input.

<TextField
  name="email"
  placeholder="your.email@gmail.com"
  defaultValue="reshaped.example@gmail.com"
/>

If you need to control the state of the field manually, you can use the value property. This provides complete control of the component value and disables automatic value handling. You must update the state using the onChange handler and can add custom logic before that happens.

<TextField
  name="email"
  placeholder="your.email@gmail.com"
  value="reshaped.example@gmail.com"
  onChange={({ value }) => {
    /* Update your state here */
  }}
/>

TextField supports prefix and suffix properties for rendering the field affixes. They can be helpful when you're displaying a value in a specific format, like phone numbers with a country code or dimensions of an object.

<TextField name="email" placeholder="hello" suffix="@gmail.com" />

TextField has slots on both start and end sides, which you can use for displaying inline content, like text, badges, or inline actions.

<View gap={3}>
  <TextField startSlot={<Badge size="small">Breakfast</Badge>} name="name" />
  <TextField
    name="email"
    endSlot={
      <Button color="neutral" size="small" color="primary">
        Submit
      </Button>
    }
  />
</View>

If you're using the start slot to display selected values, apply the multiline flag to make the selected values wrap onto the next line.

<View width="280px">
  <TextField
    name="food"
    placeholder="Pick your favorite food"
    startSlot={[
      <Badge size="small">Cinnamon bun</Badge>,
      <Badge size="small">Pasta</Badge>,
      <Badge size="small">Ice-cream</Badge>,
      <Badge size="small">Pizza</Badge>,
    ]}
    defaultValue="Pineapple"
    multiline
  />
</View>

For consistent icon usage in text fields, you can use icon and endIcon properties instead of slots and pass the icon SVG component.

<View gap={3}>
  <TextField icon={IconZap} name="email" />
  <TextField endIcon={IconZap} name="email" />
</View>

TextField comes in 3 sizes, with the medium size used by default. All sizes are aligned with sizes of other related components like Button or Select.

<View gap={3}>
  <TextField
    icon={IconZap}
    name="email"
    size="medium"
    placeholder="Enter your email"
  />
  <TextField
    icon={IconZap}
    name="email"
    size="large"
    placeholder="Enter your email"
  />
  <TextField
    icon={IconZap}
    name="email"
    size="xlarge"
    placeholder="Enter your email"
  />
</View>

If you want to alternate the styles of the input, you can use its faded variant.

<TextField
  icon={IconZap}
  name="email"
  variant="faded"
  placeholder="Enter your email"
/>

Otherwise, you can also use the headless variant which removes most of the styles from the input and lets you use it for custom layouts.

<TextField
  icon={IconZap}
  name="email"
  variant="headless"
  placeholder="Enter your email"
/>

The headless variant removes the focused and error outline since most of the time you would want to display them in a different place. You can use the :focus-within selector in your CSS to implement the focus state.

You can use the hasError property to show the user that TextField is not passing the form validation.

<TextField name="email" hasError />

You can disable TextField with the disabled flag. However, remember that disabling the field will remove it from the form submit query.

<TextField name="email" disabled />

To let the user know what data you expect them to type in, add labels or status messages to your fields with the help of the FormControl utility. In case you're using xlarge TextField size, you can also combine it with the large FormControl size for better visual alignment.

<FormControl>
  <FormControl.Label>Email</FormControl.Label>
  <TextField name="name" placeholder="example@gmail.com" />
</FormControl>

TextField can be used with any type supported in the browsers by passing it to the inputAttributes.

<TextField
  name="password"
  defaultValue="123"
  inputAttributes={{ type: "password" }}
/>

When using the headless TextField, you can align its text content with the rest of the page with TextField.Aligner utility which will adjust the space automatically based on the size of the TextField and the padding value it uses. By default, it applies negative margins on all sides of the field, but you can control that with the side property of the aligner.

<View gap={2}>
  <Text variant="featured-3" weight="bold">
    Getting started
  </Text>

  <TextField.Aligner>
    <TextField variant="headless" placeholder="Enter your name" name="name" />
  </TextField.Aligner>
</View>

TextField supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<TextField size={{ s: 'medium', l: 'large' }}>

• When using TextField without a label - make sure to provide a text description. You can either provide the label by using the FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.

<TextField attributes={{ "aria-label": "Email" }} />