Radio Group
One choice out of a few, all visible at once, with keyboard arrows and a springy dot.
Plan
<RadioGroup
legend="Plan"
defaultValue="free"
options={[
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
]}
/>Props
orientation
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/radio-group.jsonThe CLI writes components/ikada/radio-group.tsx and merges the ikada theme into your CSS. Or take it from the package: import { RadioGroup } from "@sproutboat/ikada";
Usage
import { RadioGroup } from "@/components/ikada/radio-group";
<RadioGroup
legend="Plan"
defaultValue="free"
options={[
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
]}
/>Examples
Plan
<RadioGroup
legend="Plan"
defaultValue="free"
options={[
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
]}
/>Region
<RadioGroup
legend="Region"
defaultValue="eu-west"
options={[
{ value: "eu-west", label: "eu-west", description: "Frankfurt. Closest to most of your readers." },
{ value: "us-east", label: "us-east", description: "Virginia." },
{ value: "ap-south", label: "ap-south", description: "Singapore. Not open yet.", disabled: true },
]}
/>Visibility
<RadioGroup
legend="Visibility"
orientation="horizontal"
defaultValue="private"
options={[
{ value: "private", label: "Private" },
{ value: "team", label: "Team" },
{ value: "public", label: "Public" },
]}
/>Plan
<RadioGroup
legend="Plan"
invalid
options={[
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
]}
/>Plan
<RadioGroup
legend="Plan"
defaultValue="pro"
disabled
options={[
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
]}
/>Props
| Prop | Type | Description |
|---|---|---|
| optionsrequired | readonly RadioOption[] | The choices, in order: value, label and an optional description. |
| legend | ReactNode | The group's visible name. Without one, pass `aria-label`. |
| invalid | boolean | Marks the group invalid: danger rings and aria-invalid. |
| orientation | "horizontal" | "vertical" | `horizontal` lays the options in a wrapping row. Default `vertical`. |
| className | string | Classes merged onto the root element, after ikada's own. |
| style | CSSProperties | ((state: RadioGroupState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioGroupState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Also takes every prop of Omit<ComponentProps<typeof BaseRadioGroup>, "className" | "children">.
Source: src/components/radio-group.tsx