# Radio Group

One choice out of a few, all visible at once, with keyboard arrows and a springy dot.

Source page: https://sproutboat.com/ikada/components/radio-group

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/radio-group.json
```
Or from the package: `import { RadioGroup } from "@sproutboat/ikada";`
## Usage
```tsx
import { RadioGroup } from "@/components/ikada/radio-group";

<RadioGroup
  legend="Plan"
  defaultValue="free"
  options={[
    { value: "free", label: "Free" },
    { value: "pro", label: "Pro" },
  ]}
/>
```
## Examples
### Vertical
Arrow keys move and select; Tab leaves the group.
```tsx
<RadioGroup
  legend="Plan"
  defaultValue="free"
  options={[
    { value: "free", label: "Free" },
    { value: "pro", label: "Pro" },
  ]}
/>
```
### Descriptions

```tsx
<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 },
  ]}
/>
```
### Horizontal

```tsx
<RadioGroup
  legend="Visibility"
  orientation="horizontal"
  defaultValue="private"
  options={[
    { value: "private", label: "Private" },
    { value: "team", label: "Team" },
    { value: "public", label: "Public" },
  ]}
/>
```
### Invalid

```tsx
<RadioGroup
  legend="Plan"
  invalid
  options={[
    { value: "free", label: "Free" },
    { value: "pro", label: "Pro" },
  ]}
/>
```
### Disabled

```tsx
<RadioGroup
  legend="Plan"
  defaultValue="pro"
  disabled
  options={[
    { value: "free", label: "Free" },
    { value: "pro", label: "Pro" },
  ]}
/>
```
## Props
### RadioGroupProps
Also takes every prop of `Omit<ComponentProps<typeof BaseRadioGroup>, "className" | "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| options | `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. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/radio-group.tsx