Field

Each field must be accompanied by a label. Effective form labelling helps users understand what information to enter into an 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.

<Field label="First name">
  <TextInput />
</Field>

The label must always be provided for assistive technology, but you may hide it from sighted users when the intent can be inferred from context.

<Field label="First name" labelVisibility="hidden">
  <TextInput />
</Field>

Provide additional context, typically used to indicate that the field is optional.

<Field label="First name" secondaryLabel="(Optional)">
  <TextInput />
</Field>

Customize the size of the field using size prop.

Use standard in applications where space is a premium.

Use large in customer-facing experiences, such as the booking page, where accessibility is a priority.

{/* standard */}
<Field label="First name" size="standard">
  <TextInput />
</Field>

{/* large */}
<Field label="First name" size="large">
  <TextInput />
</Field>

Provides relevant 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.

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

The errorMessage prop is used to provide users with more context as to why the field is invalid. This will be announced on focus.

<Field
  label="Email"
  secondaryLabel="(Optional)"
  errorMessage="Enter an email address in the correct format, like name@example.com"
>
  <TextInput type="email" />
</Field>

Use the isDisabled prop to show that a Field isn't usable.

{/* isDisabled */}
<Field
  label="First name"
  isDisabled
>
  <TextInput />
</Field>

Use the isRequired prop if user input is required on the field before form submission.

{/* isRequired */}
<Field
  label="First name"
  isRequired
>
  <TextInput />
</Field>

Field

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

{/* Styling the Label and Description parts */}
<Field
  label="Username"
  description="Enter your username"
  secondaryLabel="(Optional)"
  className="p-4 border border-positive"
  classNames={{
    label: 'text-positive font-stronger',
    description: 'text-positive-secondary',
    secondaryLabel: 'text-link'
  }}
>
  <TextInput />
</Field>

{/* Styling the Error state parts */}
<Field
  label="Email"
  errorMessage="Invalid email format"
  classNames={{
    errorTrack: 'mt-3',
    errorIcon: 'fill-caution',
    errorMessage: 'text-caution'
  }}
>
  <TextInput />
</Field>

{/* Styling the counter */}
<Field
  label="Message"
  counter={{ value: 10, maxValue: 100, isAlwaysVisible: true }}
  classNames={{
    counter: 'text-caution-secondary'
  }}
>
  <Textarea />
</Field>