Text Field

TextField

The TextField component is the recommended component to use, which connects the label, description, and message to the input element.

Label

Each text field must be accompanied by a label. Effective form labeling helps users understand what information to enter into a text input.

Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.

<TextField label="Name" />

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. Use sentence-style capitalisation, and in most cases, write the text as a direct statement without punctuation.

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

Description

Description text contains pertinent information that assists the user in completing a field. Description text is always visible and appears underneath the label. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

<TextField
  label="Email"
  description="We take your privacy seriously. We will never give your email to a third party."
/>

Help text

Help text is hidden by default, and revealed in a tooltip invoked by an icon beside the label. Reserve help text for content only relevant during the first interaction a user has with the field. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

In most cases description is preferred.

<TextField
  label="Tax file number"
  placeholder="xxxxxxxxxx"
  helpText="TFN is an 8 or 9 digit number. If this employee has not provided one, we will set a default TFN. You may be asked to provide an updated TFN later."
/>

Invalid message

Offer an invalid message to inform the user how their input violates the requirements of the field.

<TextField
  label="Invalid field"
  description="Passing an invalid message will automatically flag the the input as invalid"
  invalidMessage="Inform the user how their input violates the requirements of the field"
/>

Reserve message space

Reserve the vertical space that will be taken by an invalid message. You would use this to stop subsequent elements from being pushed down when an invalid message is displayed.

const [valid, setValid] = useState(true);
return (
  <Stack gap="medium">
    <Checkbox onChange={(e) => setValid(e.target.checked)} checked={valid}>
      Valid
    </Checkbox>
    <TextField
      label="Reserve message space"
      reserveMessageSpace
      invalidMessage={valid ? null : 'Invalid message'}
    />
    <Text>Element to show document "reflow" when the message appears</Text>
  </Stack>
);

TextInput

The TextInput component is a styled input element and is exposed for cases where you need to implement a custom interface.

<Stack gap="medium">
  <Columns gap="medium">
    <TextInput placeholder="Default (no value)" />
    <TextInput defaultValue="Default (with value)" />
  </Columns>
  <Columns gap="medium">
    <TextInput placeholder="Disabled (no value)" disabled />
    <TextInput defaultValue="Disabled (with value)" disabled />
  </Columns>
  <Columns gap="medium">
    <TextInput placeholder="Invalid (no value)" invalid />
    <TextInput defaultValue="Invalid (with value)" invalid />
  </Columns>
</Stack>

Size

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

<Stack gap="medium">
  <TextInput placeholder="Extra small" size="xsmall" />
  <TextInput placeholder="Small" size="small" />
  <TextInput placeholder="Medium" size="medium" />
</Stack>

Weight

For use in data-dense interfaces you can apply a weight of "none" to hide the "chrome" of the input until the user interacts with it, on hover or focus.

<TextInput defaultValue="None" weight="none" />

TextArea

The TextArea component is a styled textarea element and is exposed for cases where you need to implement a custom interface.

<TextArea placeholder="Message..." />

TextAreaField

The TextAreaField shares the same API as the TextField component.

<TextAreaField label="Content" />