Checkbox & Radio Component
Flexible selection components with various styles and states.
Basic Checkboxes
The basic checkbox component
Checkbox with Description & Error
Checkbox with description and error
You must accept the terms to continue
Allow us to collect anonymous usage data
This field is required
Checkbox Sizes
Checkbox with different sizes
Checkbox Variants
Checkbox with different variants
With a border around it
Styled as a card with more emphasis
Controlled Checkbox
Checkbox with controlled state
Radio Group Component
Various radio button styles and configurations.
Basic Radio Group
A basic example of a radio group component.
Basic features for individuals
Advanced features for professionals
Collaboration features for teams
Custom solutions for large organizations
Horizontal Layout
With Error
Please select an option
Radio Group Variants
Different variants of the radio group component.
Default Variant
Receive all notifications
Only receive important notifications
Outline Variant
Receive all notifications
Only receive important notifications
Do not receive any notifications
Card Variant
Basic features for individuals
Advanced features for professionals
Collaboration features for teams
Custom solutions for large organizations
Radio Group Sizes
Different sizes of the radio group component.
Small
Medium (Default)
Large
API Reference
Complete documentation of the Checkbox and RadioGroup components.
Checkbox Props
| Prop | Description | Type | Default |
|---|---|---|---|
| checked | Controlled checked state | boolean | - |
| defaultChecked | Default checked state (uncontrolled) | boolean | false |
| indeterminate | Whether to show indeterminate state | boolean | false |
| onChange | Callback when checked state changes | (checked: boolean) => void | - |
| label | Label text for the checkbox | string | - |
| description | Additional description text | string | - |
| error | Error message to display | string | - |
| size | Size of the checkbox | "sm" | "md" | "lg" | "md" |
| variant | Visual style variant | "default" | "outline" | "card" | "default" |
RadioGroup Props
| Prop | Description | Type | Default |
|---|---|---|---|
| options | Array of radio options | RadioOption[] | Required |
| value | Currently selected value (controlled) | string | - |
| defaultValue | Default selected value (uncontrolled) | string | - |
| onChange | Callback when selection changes | (value: string) => void | - |
| name | Name attribute for the radio inputs | string | auto-generated |
| disabled | Whether the entire group is disabled | boolean | false |
| error | Error message to display | string | - |
| orientation | Layout orientation of the radio options | "horizontal" | "vertical" | "vertical" |
| size | Size of the radio buttons | "sm" | "md" | "lg" | "md" |
| variant | Visual style variant | "default" | "outline" | "card" | "default" |