TextInput

A text field is an input that allows a user to write or edit text.

Basic usage

const Demo = () => {
  const [value, setValue] = useState("");

  return (
    <TextInput
      placeholder="Enter account number"
      value={value}
      onChange={(event) => {
        setValue(event.target.value);
      }}
    />
  );
};

Variant

Use the variant prop to control the visual style of the TextInput. The TextInput comes with two visual styles: default (default) and magicGradient.

<TextInput variant="magicGradient" {...otherProps} />

Addon

The leftAddon and rightAddon props allow you to add a component at the beginning or end of the TextInput.

<>
  <TextInput
    leftAddon={
      <Icon
        color="var(--grapes-color-content-brand-default)"
        name="robot"
        className="ml-8"
      />
    }
    {...otherProps}
  />
  <TextInput
    rightAddon={<Button variant="tertiaryNeutral" text="OK" />}
    {...otherProps}
  />
</>

Pattern validation

The pattern prop lets you specify a pattern that the input should follow. The Constraint validation API makes it possible to check that the input's value corresponds to the pattern.

You can try it out with the input below, which only accepts digits and up to 8 characters.

const Demo = () => {
  const [value, setValue] = useState("");
  return (
    <TextInput
      value={value}
      pattern="\d{0,8}"
      onChange={(event) => {
        if (event.target.checkValidity()) {
          setValue(event.target.value);
        }
      }}
    />
  );
};