The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
Radio examples
Use the default example of a radio component with the checked and unchecked state.
Disabled state
Apply the `disabled` attribute to the radio component to disallow the selection for the user.
This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.
Alternative syntax
If you need separate control over the label and the radio you can use the verbose syntax, but then you need to take care about aligning manually.
Left column
Right column
Radio with a link
Use this example if you want to add an anchor link inside the label of the radio component.
You can use the property `inline` as the alternative.
Inline 1 Inline 2 Inline checked Inline disabled
Colors
Select color
Red Green Purple Teal Yellow Orange
Advanced layout
Use this example of an advanced layout of radio elements where the label parent element can be styled when the radio is checked.
Choose technology:
0-50 MB
Good for small websites
500-1000 MB
Good for large websites
RadioButton
The special case component - `RadioButton` - is the `Radio` with the [Button](/docs/components/buttons) look and feel. I can be used as standalone element or be wrapped inside [ButtonGroup](/docs/components/button-group).
This component accepts all props from the [Button](/docs/components/buttons) for styling and `Radio` for behaviour.