Radio
An accessible radio button component for selecting a single option from a group. Built on Radix UI Radio Group with multiple sizes and states.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Radio component
Copy this code to create your Radio component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Sizes
Radio buttons are available in three different sizes: large, medium, and small.
Disabled State
Radio buttons can be disabled to prevent user interaction.
With Label
Radio buttons can be combined with labels for better accessibility and user experience.
API Reference
The Radio component is built on top of the Radix UI Radio Group primitive and extends its functionality with additional styling options and features.
Radio.Group
Contains all the parts of a radio group.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | "string" | "undefined" | The value of the radio item that should be checked when initially rendered. |
value | "string" | "undefined" | The controlled value of the radio item to check. |
onValueChange | "function" | "undefined" | Event handler called when the value changes. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with radio items. |
required | "boolean" | "false" | When true, indicates that the user must check a radio item before the form can be submitted. |
className | "string" | "undefined" | Additional CSS classes to apply to the radio group. |
Radio.Item
An individual radio item that can be checked.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm""md""lg" | "sm" | Controls the size of the radio item. |
value | "string" | "undefined" | The unique value of the radio item. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with the radio item. |
required | "boolean" | "false" | When true, indicates that the user must check this radio item before the form can be submitted. |
className | "string" | "undefined" | Additional CSS classes to apply to the radio item. |