TextInput

Import

import { TextInput } from '@contentful/f36-components';
// or
import { TextInput } from '@contentful/f36-forms';

Examples

Using as a controlled input

Controlled components in React are those in which form data is handled by the component’s state.

For using the TextInput as a controlled input, you need to:

• Pass value property, with this property it will already be a controlled component;
• Pass onChange handler, so you can use it to update the value of the input;

Hide code
function TextInputControlledExample() {
  const [value, setValue] = useState('your-email@domain.com');
  return (
    <FormControl isRequired isInvalid={!value}>
      <FormControl.Label>Email</FormControl.Label>
      <TextInput
        value={value}
        type="email"
        name="email"
        placeholder="your-email@domain.com"
        onChange={(e) => setValue(e.target.value)}
      />
      <FormControl.HelpText>Provide your email address</FormControl.HelpText>
      {!value && (
        <FormControl.ValidationMessage>
          Please, provide your email
        </FormControl.ValidationMessage>
      )}
    </FormControl>
  );
}
function TextInputControlledExample() {
  const [value, setValue] = useState('your-email@domain.com');
  return (
    <FormControl isRequired isInvalid={!value}>
      <FormControl.Label>Email</FormControl.Label>
      <TextInput
        value={value}
        type="email"
        name="email"
        placeholder="your-email@domain.com"
        onChange={(e) => setValue(e.target.value)}
      />
      <FormControl.HelpText>Provide your email address</FormControl.HelpText>
      {!value && (
        <FormControl.ValidationMessage>
          Please, provide your email
        </FormControl.ValidationMessage>
      )}
    </FormControl>
  );
}
Open in Playground

Using as an uncontrolled input

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the TextInput as an uncontrolled input, for that you can:

• Set the defaultValue property, it will ensure that the initial value of the input is set.
• Don't set the value as it will make the input controlled.

Hide code
function TextInputUncontrolledExample() {
  return (
    <FormControl isRequired>
      <FormControl.Label>Email</FormControl.Label>
      <TextInput
        defaultValue=""
        name="email"
        type="email"
        placeholder="your-email@domain.com"
      />
      <FormControl.HelpText>Provide your email address</FormControl.HelpText>
    </FormControl>
  );
}
function TextInputUncontrolledExample() {
  return (
    <FormControl isRequired>
      <FormControl.Label>Email</FormControl.Label>
      <TextInput
        defaultValue=""
        name="email"
        type="email"
        placeholder="your-email@domain.com"
      />
      <FormControl.HelpText>Provide your email address</FormControl.HelpText>
    </FormControl>
  );
}
Open in Playground

Using outside of forms

When TextInput is used outside of form (without FormControl) and has no <label> associated with it, you need to specify aria-label.

Using an icon

It is possible to provide an icon to the TextInput. It will be displayed on the left-hand side of the input.

Hide code
function TextInputIconExample() {
  return (
    <Stack flexDirection="column">
      <TextInput
        icon={<SearchIcon />}
        size="small"
        placeholder="Search for an item"
      />
      <TextInput
        icon={<SearchIcon />}
        size="medium"
        placeholder="Search for an item"
      />
    </Stack>
  );
}
function TextInputIconExample() {
  return (
    <Stack flexDirection="column">
      <TextInput
        icon={<SearchIcon />}
        size="small"
        placeholder="Search for an item"
      />
      <TextInput
        icon={<SearchIcon />}
        size="medium"
        placeholder="Search for an item"
      />
    </Stack>
  );
}
Open in Playground

With different sizes

TextInput comes with the small and medium sizes.

Hide code
function TextInputSizeExample() {
  return (
    <Stack flexDirection="column">
      <TextInput size="small" defaultValue="I'm a small TextInput" />
      <TextInput size="medium" defaultValue="I'm a medium TextInput" />
    </Stack>
  );
}
function TextInputSizeExample() {
  return (
    <Stack flexDirection="column">
      <TextInput size="small" defaultValue="I'm a small TextInput" />
      <TextInput size="medium" defaultValue="I'm a medium TextInput" />
    </Stack>
  );
}
Open in Playground

With action buttons

TextInput.Group enables the user to set a button at the start or end of an input, with some spacing or collapsed.

Hide code
function TextInputGroupExample() {
  const [isFirstLocked, setFirstLocked] = useState(true);
  const [isSecondLocked, setSecondLocked] = useState(true);
  return (
    <Stack flexDirection="column">
      <TextInput.Group>
        <TextInput
          aria-label="Content type name"
          id="content-type-name"
          defaultValue="blog"
          isDisabled={isFirstLocked}
        />
        <IconButton
          variant="secondary"
          icon={<LockIcon />}
          onClick={() => {
            setFirstLocked((value) => !value);
          }}
          aria-label="Unlock"
        />
      </TextInput.Group>
      <TextInput.Group spacing="spacingS">
        <TextInput
          aria-label="Content type name"
          id="content-type-name-2"
          defaultValue="blog"
          isDisabled={isSecondLocked}
        />
        <IconButton
          variant="secondary"
          icon={<LockIcon />}
          onClick={() => {
            setSecondLocked((value) => !value);
          }}
          aria-label="Unlock"
        />
      </TextInput.Group>
    </Stack>
  );
}
function TextInputGroupExample() {
  const [isFirstLocked, setFirstLocked] = useState(true);
  const [isSecondLocked, setSecondLocked] = useState(true);
  return (
    <Stack flexDirection="column">
      <TextInput.Group>
        <TextInput
          aria-label="Content type name"
          id="content-type-name"
          defaultValue="blog"
          isDisabled={isFirstLocked}
        />
        <IconButton
          variant="secondary"
          icon={<LockIcon />}
          onClick={() => {
            setFirstLocked((value) => !value);
          }}
          aria-label="Unlock"
        />
      </TextInput.Group>
      <TextInput.Group spacing="spacingS">
        <TextInput
          aria-label="Content type name"
          id="content-type-name-2"
          defaultValue="blog"
          isDisabled={isSecondLocked}
        />
        <IconButton
          variant="secondary"
          icon={<LockIcon />}
          onClick={() => {
            setSecondLocked((value) => !value);
          }}
          aria-label="Unlock"
        />
      </TextInput.Group>
    </Stack>
  );
}
Open in Playground

Different states

Hide code
function TextInputStatesExample() {
  return (
    <Stack flexDirection="column">
      <TextInput
        defaultValue="I'm disabled TextInput"
        isDisabled
        name="value-1"
      />
      <TextInput
        defaultValue="I'm invalid TextInput"
        isInvalid
        name="value-1"
      />
      <TextInput
        defaultValue="I'm read-only TextInput"
        isReadOnly
        name="value-1"
      />
    </Stack>
  );
}
function TextInputStatesExample() {
  return (
    <Stack flexDirection="column">
      <TextInput
        defaultValue="I'm disabled TextInput"
        isDisabled
        name="value-1"
      />
      <TextInput
        defaultValue="I'm invalid TextInput"
        isInvalid
        name="value-1"
      />
      <TextInput
        defaultValue="I'm read-only TextInput"
        isReadOnly
        name="value-1"
      />
    </Stack>
  );
}
Open in Playground

TextInput

TextInput.Group

Density support

These components supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density (when wrapped with the DensityProvider).

Content guidelines

• Use direct and succinct copy that helps a user to successfully complete a form
• Do not preface the instructions with introductory text, such as "please"
• Use sentence style caps (in which only the first word of a sentence or term is capitalized)

Accessibility

• To ensure TextInput meets accessibility standards, provide name and id
• Keep in mind that to provide that accessible inputs, you need to use labels.
• If you decide, that for some reason you would not use the label, please provide aria-label attribute to make it accessible for technologies like screen readers.