BRAID
Braid Logo
 

TextField

Open in Playroom

Alternatives

Additional labels

Supports all three levels of FieldLabel:
  • label — primary title of the field,
  • secondaryLabel — additional context, typically used to indicate optionality of a field,
  • tertiaryLabel — further context, typically used for providing assistance with a field.
 Help
Open in Playroom

Message and tone

A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.
The supported tones are: "critical", "positive", "caution", and "neutral".
Critical message
Positive message
Caution message
Neutral message
Open in Playroom

Field description

Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Extra information about the field
Open in Playroom

Disabled field

Mark the field as disabled by passing true to the disabled prop.
Open in Playroom

Placeholder prompt

Providing a placeholder will display as a prompt to the user when no value is entered.
Open in Playroom

Clearing the field

A clear icon button will appear in the field when the user has entered text. You must pass a function to the onClear prop, which will be called when the button is clicked.
Translation hint The aria-label for the clear button can be customised by providing a clearLabel prop.
Open in Playroom

Inserting an icon

For decoration and help distinguishing between fields, an icon can be provided. This will be placed to the left of the field and is not interactive.
Open in Playroom

Adding a prefix

The prefix prop allows you to prepend read-only content on the left-hand side of the field. This is typically used for currency symbols, country codes, etc.
Open in Playroom

Limiting the number of characters

Providing a characterLimit will communicate when the input text approaches or exceeds the specified limit.
To prevent loss of information, exceeding the limit is permitted, however the count will be presented in a critical tone.
Character limit of 50
 
-16
Open in Playroom

Tailoring the keyboard layout

To improve the user experience when entering text on mobile devices, the keyboard layout can be tailored to suit its content using the inputMode prop.
Choose from the built-in inputmodes, for example: numeric, email, url, etc. and the device will show the appropriate keyboard layout.
Selected input mode:
numeric
Note: Keyboard change only visible on a mobile device
Open in Playroom

Indirect or hidden field labels

In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.

Custom field label

The label for this field is the Heading element before it.
The label for this field is hidden.
Open in Playroom