RadioCard
RadioCard component - button-like radio option Supports an `onChange` callback when selected.
RadioCard component - button-like radio option
Supports an onChange callback when selected.
import { RadioCard } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
size | Optional | ComponentSize | undefined | 'md' | Size variant of the radio |
color | Optional | "success" | "warning" | "error" | "primary" | "default" | undefined | 'default' | Color variant when checked |
radius | Optional | BorderRadius | undefined | 'full' | Border radius variant (full makes it circular) |
className | Optional | string | undefined | — | Custom className for the root element |
label | Optional | string | undefined | — | Label text (or use children for custom content) |
children | Optional | React.ReactNode | — | Children content (takes precedence over label) |
indicatorClassName | Optional | string | undefined | — | Custom className for the indicator element |
Usage
Accessible radio buttons built on Radix UI @radix-ui/react-radio-group. Provides three components: Radio (individual item), RadioGroup (container), and RadioCard (button-style radio).
RadioGroup Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
orientation | 'horizontal' | 'vertical' | no | 'vertical' | Layout direction |
noGap | boolean | no | false | Removes the default gap between radio items |
className | string | no | — | Additional class |
All Radix RadioGroupPrimitive.Root props (e.g. defaultValue, value, onValueChange, disabled) are also accepted.
Radio Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | string | yes | — | Value associated with this option |
size | ComponentSize ('sm' | 'md' | 'lg') | no | 'md' | Size variant |
color | ComponentColor | no | 'primary' | Color variant when checked |
radius | BorderRadius | no | 'full' | Border radius ('full' for circle) |
label | string | no | — | Text label rendered inside the item |
children | React.ReactNode | no | — | Custom content (takes precedence over label) |
indicatorClassName | string | no | — | Additional class for the inner indicator dot |
All Radix RadioGroupPrimitive.Item props are also accepted.
RadioCard Props
Accepts the same props as Radio. Renders as a button-styled card suitable for time-range selectors.
Default overrides: size='sm', color='default', radius='none'.
Example
/** * Runnable example for Radio and RadioGroup. */import { useState } from 'react'import { Radio, RadioCard, RadioGroup } from '@tetherto/mdk-react-devkit'export const RadioExample = () => { const [plan, setPlan] = useState('standard') const [interval, setInterval] = useState('5min') return ( <div className="mdk-example-col"> <RadioGroup value={plan} onValueChange={setPlan} orientation="vertical"> <div className="mdk-example-inline"> <Radio value="basic" color="primary" /> <span>Basic</span> </div> <div className="mdk-example-inline"> <Radio value="standard" color="primary" /> <span>Standard</span> </div> <div className="mdk-example-inline"> <Radio value="pro" color="primary" disabled /> <span>Pro (unavailable)</span> </div> </RadioGroup> <RadioGroup value={interval} onValueChange={setInterval} orientation="horizontal"> <RadioCard value="5min" label="5 Min" /> <RadioCard value="15min" label="15 Min" /> <RadioCard value="30min" label="30 Min" /> <RadioCard value="1h" label="1 Hour" /> </RadioGroup> </div> )}