Components
Radio button
Use: Deployed English, Spanish, TagalogExamples - v1
Default
Hint text
View va-radio with hint text in Storybook
Label header
View va-radio with label header in Storybook
Description text
View va-radio with description text in Storybook
Tile
View va-radio tile in Storybook
Error
View va-radio error in Storybook
Internationalization
View va-radio internationalization in Storybook
Examples - v3
Default
View va-radio v3 default and additional variations in Storybook
Usage
Refer to the U.S. Web Design System for usage guidance
Choosing between variations
- Use the Hint text variation to provide additional information that pertains to the question being asked or all of the options presented.
- Use the Label header variation when a heading is required within the
legend
that acts as a label for the radio buttons. This can aid users in navigating the form questions, particularly in the sub-task pattern - Use the Description text variation to provide additional details about one or more radio button options. This variation is superseded by the Tile variation.
- Use the Tile variation to provide additional details about one or more radio button options within a large and well defined tap target.
Errors
- Radio buttons typically appear inside of
<fieldset>
s. The class name ofusa-input-error
may be placed on the<fieldset>
that contains all of the radio buttons. - The error message is placed just below the
<legend>
. - See form error handling for additional guidance.
Code usage
Attributes and Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
enableAnalytics |
enable-analytics |
boolean |
false |
Whether or not an analytics event will be fired. |
error |
error |
string |
A string with an error message. | |
hint |
hint |
string |
Optional hint text. | |
label |
label |
string |
The text label for the radio group. | |
labelHeaderLevel |
label-header-level |
string |
Insert a header with defined level inside the label (legend) | |
required |
required |
boolean |
false |
Whether or not this input field is required. |
uswds |
uswds |
boolean |
false |
Whether or not the component will use USWDS v3 styling. |
Events
Name | Description |
---|---|
component-library-analytics |
The event used to track usage of the component. This is emitted when a radio option is selected and enableAnalytics is true. |
vaValueChange |
The event emitted when the selected value changes |
keydown |
The event emitted when a key is pressed. |
radioOptionSelected |
The event emitted when the selected option value changes. |
Accessibility considerations
Refer to the U.S. Web Design System for accessibility guidance