Radio
Radios are used to choose between multiple options.
Overview
Use these when there are multiple options, but only one of them can be selected. Consider using a radio instead of a dropdown menu when there are only a few options available.
Usage
Note that RadioField expects Radio elements as its direct children in order to set the correct name, value, and error properties.
Content
Copy for individual inputs in radios and checkbox groups are in semibold for consistency, because they sit in a hierarchy below the group labels.
Only ask for information that definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.
Hint Text
Radios have two options to add hint text. Hint text that appears below the group label should be relevant to the entire group, whereas text below the select item should be relevant to that item only.
Accessibility
Labels
Radio groups need a group label, which should always sit aligned above it. This label allows users to understand what to enter as well as auto focussing the input which creates a larger touch target.
Validation
- Avoid default HTML form validation
- Avoid validation while typing
- Always validate and show error messages once the form has been submitted
Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.
Theme examples
Smaller radios
Due to the complexity of styling radio inputs we have provided an example theme override to reduce the radio size.
Note that the paddingTop (used align the text with the radio) and the marginTop (used to put space between sibling radios) can take a single value or an array or responsive values - this is useful when aligning text that changes size across breakpoints.
Properties
RadioField
| Name | Values | Default |
|---|---|---|
name (required)Radios are treated as a single field | String | |
label (required) | ReactNode | |
optional | Boolean | false |
hint | ReactNode | |
error | ReactNode | |
value | String | |
onValueChange(newValue) => null | Function | |
defaultValueThe default selected radio | String | |
... | JSX.IntrinsicElements["fieldset"] |
Radio
| Name | Values | Default |
|---|---|---|
id (required) | String | |
label (required) | ReactNode | |
value | String | |
hint | ReactNode | |
... | JSX.IntrinsicElements["input"] |