TextField

TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

Example#

<TextField label="Name" />

<TextField label="Name" />

<TextField label="Name" />

Value#

A TextField's value is empty by default, but an initial, uncontrolled, value can be provided using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

function Example() {
  let [value, setValue] = React.useState('me@email.com');

  return (
    <Flex gap="size-150" wrap>
      <TextField
        label="Email (Uncontrolled)"
        defaultValue="me@email.com" />

      <TextField
        label="Email (Controlled)"
        value={value}
        onChange={setValue} />
    </Flex>
  );
}

function Example() {
  let [value, setValue] = React.useState('me@email.com');

  return (
    <Flex gap="size-150" wrap>
      <TextField
        label="Email (Uncontrolled)"
        defaultValue="me@email.com" />

      <TextField
        label="Email (Controlled)"
        value={value}
        onChange={setValue} />
    </Flex>
  );
}

function Example() {
  let [value, setValue] =
    React.useState(
      'me@email.com'
    );

  return (
    <Flex
      gap="size-150"
      wrap
    >
      <TextField
        label="Email (Uncontrolled)"
        defaultValue="me@email.com"
      />

      <TextField
        label="Email (Controlled)"
        value={value}
        onChange={setValue}
      />
    </Flex>
  );
}

Placeholder text that describes the expected value or formatting for the TextField can be provided using the placeholder prop. Placeholder text will only appear when the TextField is empty, and should not be used as a substitute for labeling the component with a visible label.

<TextField placeholder="abc@adobe.com" label="Email" />

<TextField placeholder="abc@adobe.com" label="Email" />

<TextField
  placeholder="abc@adobe.com"
  label="Email"
/>

Labeling#

A visual label should be provided for the TextField using the label prop. If the TextField is required, the isRequired and necessityIndicator props can be used to show a required state.

<Flex gap="size-150" wrap>
  <TextField label="Street address" />
  <TextField label="Street address" isRequired necessityIndicator="icon" />
  <TextField label="Street address" isRequired necessityIndicator="label" />
  <TextField label="Street address" necessityIndicator="label" />
</Flex>

<Flex gap="size-150" wrap>
  <TextField label="Street address" />
  <TextField
    label="Street address"
    isRequired
    necessityIndicator="icon"
  />
  <TextField
    label="Street address"
    isRequired
    necessityIndicator="label"
  />
  <TextField
    label="Street address"
    necessityIndicator="label"
  />
</Flex>

<Flex
  gap="size-150"
  wrap
>
  <TextField label="Street address" />
  <TextField
    label="Street address"
    isRequired
    necessityIndicator="icon"
  />
  <TextField
    label="Street address"
    isRequired
    necessityIndicator="label"
  />
  <TextField
    label="Street address"
    necessityIndicator="label"
  />
</Flex>

Accessibility#

If a visible label isn't specified, an aria-label must be provided to the TextField for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Internationalization#

In order to internationalize a TextField, a localized string should be passed to the label or aria-label prop. When the necessityIndicator prop is set to "label", a localized string will be provided for "(required)" or "(optional)" automatically.

Events#

TextField accepts an onChange prop which is triggered whenever the value is edited by the user. For a full list of supported events, see the Props table below.

The example below uses onChange to update a separate pre element with the same text entered into the TextField.

function Example() {
  let [text, setText] = React.useState();

  return (
    <Flex direction="column" gap="size-150">
      <TextField
        placeholder="Enter some text"
        onChange={setText}
        label="Your text" />
      <pre>Mirrored text: {text}</pre>
    </Flex>
  );
}

function Example() {
  let [text, setText] = React.useState();

  return (
    <Flex direction="column" gap="size-150">
      <TextField
        placeholder="Enter some text"
        onChange={setText}
        label="Your text" />
      <pre>Mirrored text: {text}</pre>
    </Flex>
  );
}

function Example() {
  let [text, setText] =
    React.useState();

  return (
    <Flex
      direction="column"
      gap="size-150"
    >
      <TextField
        placeholder="Enter some text"
        onChange={setText}
        label="Your text"
      />
      <pre>
        Mirrored text:
        {' '}
        {text}
      </pre>
    </Flex>
  );
}

Validation#

TextFields can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" to the TextField via the validationState prop.

The example below illustrates how one would validate if the user has entered a valid email into the TextField.

function Example() {
  let [value, setValue] = React.useState('me@email.com');
  let isValid = React.useMemo(
    () => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value),
    [value]
  );

  return (
    <TextField
      validationState={isValid ? 'valid' : 'invalid'}
      placeholder="Enter your email"
      value={value}
      onChange={setValue}
      label="Email"
    />
  );
}

function Example() {
  let [value, setValue] = React.useState('me@email.com');
  let isValid = React.useMemo(
    () =>
      /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
        value
      ),
    [value]
  );

  return (
    <TextField
      validationState={isValid ? 'valid' : 'invalid'}
      placeholder="Enter your email"
      value={value}
      onChange={setValue}
      label="Email"
    />
  );
}

function Example() {
  let [value, setValue] =
    React.useState(
      'me@email.com'
    );
  let isValid = React
    .useMemo(
      () =>
        /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
          .test(value),
      [value]
    );

  return (
    <TextField
      validationState={isValid
        ? 'valid'
        : 'invalid'}
      placeholder="Enter your email"
      value={value}
      onChange={setValue}
      label="Email"
    />
  );
}

Props#

Visual options#

Quiet#

View guidelines

<TextField label="Email" placeholder="Email Address" isQuiet />

<TextField
  label="Email"
  placeholder="Email Address"
  isQuiet
/>

<TextField
  label="Email"
  placeholder="Email Address"
  isQuiet
/>

Disabled#

View guidelines

<TextField label="Email" placeholder="Email Address" isDisabled />

<TextField
  label="Email"
  placeholder="Email Address"
  isDisabled
/>

<TextField
  label="Email"
  placeholder="Email Address"
  isDisabled
/>

Read only#

The isReadOnly boolean prop makes the TextField's text content immutable. Unlike isDisabled, the TextField remains focusable and the contents can still be copied. See the MDN docs for more information.

<TextField label="Email" defaultValue="abc@adobe.com" isReadOnly />

<TextField
  label="Email"
  defaultValue="abc@adobe.com"
  isReadOnly
/>

<TextField
  label="Email"
  defaultValue="abc@adobe.com"
  isReadOnly
/>

Label alignment and position#

View guidelines

By default, the label is positioned above the TextField. The labelPosition prop can be used to position the label to the side. The labelAlign prop can be used to align the label as "start" or "end". For left-to-right (LTR) languages, "start" refers to the left most edge of the TextField and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.

<TextField label="Search" labelPosition="side" labelAlign="end" />

<TextField
  label="Search"
  labelPosition="side"
  labelAlign="end"
/>

<TextField
  label="Search"
  labelPosition="side"
  labelAlign="end"
/>

Help text#

View guidelines

Both a description and an error message can be supplied to a TextField. The description is always visible unless the validationState is “invalid” and an error message is provided. The error message can be used to help the user fix their input quickly and should be specific to the detected error. All strings should be localized.

function Example() {
  let [value, setValue] = React.useState('0');
  let isValid = React.useMemo(() => /^\d$/.test(value), [value]);

  return (
    <TextField
      validationState={isValid ? 'valid' : 'invalid'}
      value={value}
      onChange={setValue}
      label="Favorite number"
      maxLength={1}
      description="Enter a single digit number."
      errorMessage={value === ''
        ? 'Empty input not allowed.'
        : 'Single digit numbers are 0-9.'}
    />
  );
}

function Example() {
  let [value, setValue] = React.useState('0');
  let isValid = React.useMemo(() => /^\d$/.test(value), [
    value
  ]);

  return (
    <TextField
      validationState={isValid ? 'valid' : 'invalid'}
      value={value}
      onChange={setValue}
      label="Favorite number"
      maxLength={1}
      description="Enter a single digit number."
      errorMessage={value === ''
        ? 'Empty input not allowed.'
        : 'Single digit numbers are 0-9.'}
    />
  );
}

function Example() {
  let [value, setValue] =
    React.useState('0');
  let isValid = React
    .useMemo(
      () =>
        /^\d$/.test(
          value
        ),
      [value]
    );

  return (
    <TextField
      validationState={isValid
        ? 'valid'
        : 'invalid'}
      value={value}
      onChange={setValue}
      label="Favorite number"
      maxLength={1}
      description="Enter a single digit number."
      errorMessage={value ===
          ''
        ? 'Empty input not allowed.'
        : 'Single digit numbers are 0-9.'}
    />
  );
}

Custom width#

View guidelines

<TextField label="Email" width="size-3600" maxWidth="100%" />

<TextField
  label="Email"
  width="size-3600"
  maxWidth="100%"
/>

<TextField
  label="Email"
  width="size-3600"
  maxWidth="100%"
/>