Question page
Radio
Allow users to select one option from a set.
Props
name
string
The name for the radio group. Used for accessibility and change events.
ariaLabel
string
Defines how the radio group will be announced by screen readers.
disabled
boolean
Disables all radio items in the group.
error
boolean
Shows an error state on all radio items in the group.
id
string
The identifier for the radio group element.
orientation
GoabRadioGroupOrientation
Sets the layout direction. 'vertical' stacks items, 'horizontal' places them in a row.
Defaults to
vertical.
size
GoabRadioGroupSize
Sets the size of all radio items. 'compact' reduces spacing for dense layouts.
Defaults to
default.
testId
string
Sets a data-testid attribute for automated testing.
value
string
The currently selected value in the radio group.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onBlur
(detail: GoabRadioGroupOnBlurDetail) => void
Callback fired when focus leaves all radio items in the group.
onChange
(detail: GoabRadioGroupOnChangeDetail) => void
Callback fired when the selected radio item changes.
onFocus
(detail: GoabRadioGroupOnFocusDetail) => void
Callback fired when focus enters any radio item in the group.
Radio Item Props
ariaLabel
string
Defines how this option will be announced by screen readers.
compact
boolean
Reduces spacing for dense layouts.
description
string | React.ReactNode
Additional description text displayed below the label.
disabled
boolean
Disables this radio option. Also disabled if the parent RadioGroup is disabled.
error
boolean
Shows an error state on this radio option.
label
string
The display label for this radio option. Falls back to value if not provided.
maxWidth
string
Sets the maximum width of this radio item.
name
string
The name of the radio group. Inherited from the parent RadioGroup if not set.
revealAriaLabel
string
Text announced by screen readers when the reveal content is displayed.
value
string
The value of this radio option. Will be emitted when selected.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Radio Item Events
Radio Item ReactNode
description
ReactNode
Additional description text displayed below the label.
reveal
ReactNode
Content revealed below the radio option when it is selected.
States
When you must disable a button or input:
- Provide nearby text explaining what needs to happen first
- Consider showing the element enabled with validation on submit instead
- Use aria-describedby to link the disabled element to explanatory text
Don't
Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.
Other
The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.
Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
Tip
Use the reveal slot to show additional content when a radio option is selected, like a follow-up question or input field.
Tip
Always use RadioGroup as the parent for sets of RadioItem children. Don't try to build radio button sets manually.
Content
Tip
Use the description prop to add context on radio options where the label alone isn't enough to explain the choice.
Don't
Don't include a period after a radio label.
Usage
Don't
Don't use radios when there are more than 7 options - use a dropdown instead.
Interaction
Don't
Don't nest multiple layers of conditionally revealed questions.
Don't
Don't preselect radio items - users might miss the question or submit the wrong answer.
Layout
Do
Consider horizontal listing when presenting 2-3 short options like Yes/No.
Screen Readers
Warning
When using the reveal slot, set revealAriaLabel so screen readers announce the newly visible content.
