BRAID
Braid Logo
 

FieldMessage

This is a critical message.
This is a positive message.
This is a neutral message.
This is a caution message.
Open in Playroom

Alternatives

  • FieldLabel — For displaying labels above a custom field

Accessibility

The id prop is required, but you should also ensure that the associated field has a matching aria-describedby prop.

Message

A message is used to communicate the status of a field, such as an error message. This will be announced on focus of the associated field.
This message will be announced on focus of the field above by assistive technologies.
Open in Playroom

Secondary Message

A secondaryMessage can be used to communicate secondary information about the field, for example the number of characters remaining for input.
Example message.
20 characters remaining
Open in Playroom

Tone

The tone can be used to further illustrate the purpose of the message.The supported tones are: "critical", "positive", "caution", and "neutral".
This is a critical message.
This is a positive message.
This is a neutral message.
This is a caution message.
Open in Playroom

Disabled

A message is not shown when the disabled prop is provided. This standardises the message behaviour across all form fields in Braid.
 
Open in Playroom

Reserving message space

To maintain stability within a form that has conditional messages (e.g. validation), the reserveMessageSpace prop will reserve a single line below the field. This is set to true by default.
With reserveMessageSpace
 
Without reserveMessageSpace
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.
<FieldMessage
  data={{ testid: 'field-message-1' }}
  // => data-testid="field-message-1"
/>
Open in Playroom