Stepwise UI

Radio

Squircle radio button in three sizes. Works controlled or uncontrolled. For groups, manage state externally and pass the same name to each radio.

Installation

npx stepwise-ui add radio

States

import { Radio } from '@/components/stepwise/radio'

<Radio label="Unchecked" />
<Radio label="Checked" defaultChecked />

Sizes

<Radio size="sm"      label="Small"   defaultChecked />
<Radio size="default" label="Default" defaultChecked />
<Radio size="lg"      label="Large"   defaultChecked />

Group

Track selected value in useState and pass checked as a comparison. Wrap the radio inside a custom label for richer content.
const [value, setValue] = useState('pro')

{options.map(opt => (
  <label key={opt.value} className="flex items-center gap-3 cursor-pointer">
    <Radio
      name="plan"
      value={opt.value}
      checked={value === opt.value}
      onChange={() => setValue(opt.value)}
    />
    <span>
      <span className="text-[14px] font-medium">{opt.label}</span>
      <span className="text-[12px] text-zinc-500">{opt.desc}</span>
    </span>
  </label>
))}

Disabled

<Radio label="Unchecked disabled" disabled />
<Radio label="Checked disabled" defaultChecked disabled />

Props

PropTypeDescription
size
"sm" | "default" | "lg"
16 / 20 / 24 px. Default: "default".
label
string
Text label next to the radio.
checked
boolean
Controlled checked state.
defaultChecked
boolean
Initial state when uncontrolled.
disabled
boolean
40% opacity, blocks interaction.
name
string
Input name - groups radios in native forms.
onChange
(e: ChangeEvent) => void
Change handler - receives the native event.