Radio
Select a single option from a predefined set of choices
Source ↗️ Report Issue ↗️Use the Radio
component for single choice selections, where you need to restrict users to select only a single option from a list of selections. They are commonly used in forms and surveys, settings and preferences, or decision making.
Radio States
Radio buttons can have different states. Use the selected
and disabled
props on an item to make a radio button selected by default, or disable it:
Labels and Styles
Radio buttons can be created with additional labels using the subText
prop. The subText
prop also supports HTML tags:
To align radio buttons next to each other, you can set the inline
prop to true
:
Their color can also be styled on an individual level, using the color
prop:
However, if you need to use a custom color for your radio groups globally, the preferred way to set colors is to override the following CSS variable:
API
Prop | Purpose |
---|---|
items | Sets items for the radio group. Each item must have a label and value properties. |
items.subText | Sets additional text under the item's label. |
items.selected | Sets the item as selected. |
items.disabled | Sets the item as disabled. |
name | Sets a name for the radio group that can be referenced. |
color | Sets the color of the radio buttons. |
inline | Sets the radio buttons to be displayed next to each other. Defaults to false . |
className | Pass additional CSS classes for the radio group. |
Svelte & React Prop | Purpose |
---|---|
onChange | Attach on-change event listeners. |
Request improvement for this page