InlineField

Each InlineField 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.

<InlineField label="First name">
  <TextInput placeholder="Placeholder" />
</InlineField>

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.

<InlineField label="First name" labelVisibility="hidden">
  <TextInput placeholder="Placeholder" />
</InlineField>

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

<InlineField label="First name" secondaryLabel="(Optional)">
  <TextInput placeholder="Placeholder" />
</InlineField>

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

The errorMessage prop is  ⚠️ deprecated and will be removed in a future release, please check the FieldMessage section to add error state.

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

Use the status prop to indicate whether a field is in an error or warning state.

<Stack className="gap-4">
  <InlineField
    label="Email"
    status="error"
  >
    <TextInput type="email" />
  </InlineField>

  <InlineField
    label="Email"
    status="warning"
  >
    <TextInput type="email" />
  </InlineField>
</Stack>

Use the status and fieldMessage props to communicate why a field is in an error or warning state. When present, the message is announced by screen readers on focus.

<Stack className="gap-4">
  <InlineField
    label="Email"
    status="error"
    fieldMessage="Enter an email address in the correct format, like name@example.com"
  >
    <TextInput type="email" />
  </InlineField>

  <InlineField
    label="Email"
    status="warning"
    fieldMessage="Enter an email address in the correct format, like name@example.com"
  >
    <TextInput type="email" />
  </InlineField>
</Stack>

Use the counter prop to display a character count indicator beneath any input component (e.g., TextInput, Textarea). The counter accepts value, maxValue, and isAlwaysVisible parameters.

The counter shows the difference between the current value and maxValue, along with a circular progress indicator. When the value exceeds maxValue, it displays a negative number.

By default, the counter appears when input reaches 50% of maxValue. Use isAlwaysVisible: true to show it at all times.

const [inputValue, setInputValue] = React.useState('');

return (
<InlineField label="Characters counter demo" counter={{ value: inputValue.length, maxValue: 20, isAlwaysVisible: true }}
  errorMessage={inputValue.length> 20 ? 'Max length exceeded' : undefined}
  >
  <TextInput placeholder="Enter text" value={inputValue} onChange={(e)=> setInputValue(e.target.value)}
    />
</InlineField>
)

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

{/* isDisabled */}
<InlineField
  label="First name"
  isDisabled
>
  <TextInput defaultValue="Disabled input" />
</InlineField>

InlineField

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 input wrapper */}
<InlineField
  className="border-2 border-primary rounded-lg px-2 py-2"
  classNames={{
    label: 'text-positive font-strong',
    secondaryLabel: 'text-caution italic',
    inputWrapper: 'gap-2'
  }}
	label="Email Address"
	secondaryLabel="(required)"
>
	<TextInput placeholder="Enter your email" />
</InlineField>

{/* Styling the error icon and error message */}
<InlineField
  classNames={{
    errorMessage: 'text-onPrimary font-stronger',
    errorTrack: 'bg-critical px-2 py-1 rounded-lg',
    errorIcon: 'fill-caution'
  }}
  errorMessage="Enter an email address in the correct format, like name@example.com"
>
	<TextInput placeholder="Enter your email" />
</InlineField>

{/* Styling the counter component */}
<InlineField
  className="w-full"
  classNames={{
    counter: 'text-positive'
  }}
  counter={{ maxValue: 100, value: 40, isAlwaysVisible: true }}
>
	<TextInput placeholder="Enter your email" />
</InlineField>