Alternatives

Textarea — For multi-line text input
CurrencyInput — For currency amount input
DurationInput — For amount of time input
SearchInput — For search input
SearchInput — For search input

Usage

The TextInput component is a styled input element.

<Stack gap="medium">
  <Columns gap="medium">
    <Field label="Default">
      <TextInput placeholder="Default (no value)" />
    </Field>
    <Field label="Default">
      <TextInput defaultValue="Default (with value)" />
    </Field>
  </Columns>
  <Columns gap="medium">
    <Field label="Disabled">
      <TextInput placeholder="Disabled (no value)" disabled />
    </Field>
    <Field label="Disabled">
      <TextInput defaultValue="Disabled (with value)" disabled />
    </Field>
  </Columns>
  <Columns gap="medium">
    <Field label="Read only">
      <TextInput placeholder="-" readOnly />
    </Field>
    <Field label="Read only">
      <TextInput defaultValue="Read only (with value)" readOnly />
    </Field>
  </Columns>
  <Columns gap="medium">
    <Field label="Invalid" invalidMessage="Invalid">
      <TextInput placeholder="Invalid (no value)" />
    </Field>
    <Field label="Invalid" invalidMessage="Invalid">
      <TextInput defaultValue="Invalid (with value)" />
    </Field>
  </Columns>
  <Columns gap="medium">
    <Field label="Password (valid state)">
      <TextInput value="Test123" type="password" onChange={() => {}} />
    </Field>
    <Field label="Password (invalid state)" invalidMessage="Invalid">
      <TextInput value="Test123" type="password" onChange={() => {}} />
    </Field>
  </Columns>
</Stack>

Size

There are two options for the size of the text input, "medium" is the default.

Edit in Playroom

<Stack gap="medium">
  <Field label="Small">
    <TextInput size="small" value="Example input" />
  </Field>
  <Field label="Medium">
    <TextInput size="medium" value="Example input" />
  </Field>
</Stack>

Placeholder

Placeholder text provides hints or examples of what to enter.

Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Do not use placeholder text as a replacement for labels or descriptions.

Use sentence-style capitalisation, and in most cases, write the text as a direct statement without punctuation.

Edit in Playroom

<Field label="Address line 1">
  <TextInput placeholder="Ex. 742 Evergreen Terr" />
</Field>

Text Input

Usage

Size

Placeholder