Components
Radio
Hand-drawn radio buttons with a filled inner circle when selected.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/radio.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
defaultValuestring—
Initial uncontrolled value.
name*string—
Controls the `name` behavior.
onChange(value: string) => void—
Callback fired when the value changes.
options*RadioOption[]—
Options rendered by the component.
orientation"vertical" | "horizontal""vertical"Controls the component layout direction.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
valuestring—
Controlled value for the component.
Horizontal layout
With disabled option
Accessibility
RadioGroup renders native radio inputs, so arrow-key navigation and form behavior follow browser conventions. Use a shared name and a visible group label when the choice set needs extra context.
Examples
import { RadioGroup } from "@/components/crumble/ui/radio";
<RadioGroup
name="plan"
defaultValue="monthly"
options={[
{ value: "monthly", label: "Monthly" },
{ value: "yearly", label: "Yearly" },
{ value: "lifetime", label: "Lifetime" },
]}
/>;