FieldLabel

Label (Secondary label) Tertiary label

This component is only required when building a custom field that isn’t provided by Braid.

Alternatives

FieldMessage — For displaying messages below a custom field.

Accessibility

The htmlFor prop is mandatory, which accepts the ID of the field being labelled. This ensures that screen readers are able to associate the label with its associated field.

Label

Sets the primary label of field.

Label

Open in Playroom

Secondary label

Provide additional context, typically used to indicate optionality of a field.

Only displayed when provided in addition to a label.

Label (Secondary label)

Open in Playroom

Tertiary label

Provide further context, typically used for providing assistance with a field.

Only displayed when provided in addition to a label.

Label Tertiary label

Open in Playroom

Additional description

Additional context can be provided with a description. This will display below the field label.

It is strongly recommended that a descriptionId is also passed in, allowing the description to be associated with your custom field via aria-describedby prop. This will allow a screen reader to provide this additional context upon focusing the field.

LabelExtra information about the field

Open in Playroom

Disabled field

Setting the disabled prop to true dims the field label.

Label

Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.

<FieldLabel
  data={{ testid: 'field-label-1' }}
  // => data-testid="field-label-1"
/>

Open in Playroom

Braid Logo