# RadioGroup

> A set of mutually exclusive options built from native `<input type="radio">` controls sharing one grouping name, rendered as a `role="radiogroup"` host wrapping a run of RadioGroup.Radio instances.

```ts
import { RadioGroup } from "@sdxc/ui";
```

Renders the group host: a `role="radiogroup"` `<div>` laying its
RadioGroup.Radio options in a column, or a row when
`orientation` is `"horizontal"`, giving every option a shared, stable `name`.

## Examples

```tsx
<RadioGroup aria-label={t("shipping.method")}>
	<RadioGroup.Radio value="standard">{t("shipping.standard")}</RadioGroup.Radio>
	<RadioGroup.Radio value="express">{t("shipping.express")}</RadioGroup.Radio>
</RadioGroup>
```

```tsx
<RadioGroup aria-label={t("size.label")} orientation="horizontal">
	<RadioGroup.Radio value="sm">{t("size.small")}</RadioGroup.Radio>
	<RadioGroup.Radio value="md">{t("size.medium")}</RadioGroup.Radio>
	<RadioGroup.Radio value="lg">{t("size.large")}</RadioGroup.Radio>
</RadioGroup>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `name?` | `string` | Native grouping name shared by every RadioGroup.Radio nested inside. Defaults to the group's own stable instance id so options group correctly without a consumer setting one. |
| `orientation?` | `"horizontal" \| "vertical"` | Layout axis. Defaults to DEFAULT_ORIENTATION. |

Also accepts everything in `TagProps<"div">`.


### RadioGroup.Radio

Renders a single option: a `<label>` pairing a hidden native `<input type="radio">` with a styled indicator driven by its checked, focus, and disabled state; add `ariaChecked()` via `parts.input` for `aria-checked`.

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | Value submitted with the enclosing form when this option is selected. |
| `name?` | `string` | Native grouping name for this option's underlying input. Defaults to the name provided by the nearest ancestor RadioGroup — set this only to opt a single option out of its group's shared name. |
| `defaultChecked?` | `boolean` | Whether this option starts selected, for a form that leaves selection tracking to the browser. |
| `checked?` | `boolean` | Whether this option is selected, for a form that tracks selection itself. |
| `disabled?` | `boolean` | Whether this option is inert and excluded from the group's tab order. |
| `required?` | `boolean` | Marks the enclosing native radio group as requiring one option selected. |
| `children?` | `RemixNode` | The option's visible label text, associated with the input by native nesting. |
| `parts?` | ``{ /** Additional mixin(s) applied to the hidden native `<input type="radio">`. */ input?: TagProps<"input">["mix"]; /** Additional mixin(s) applied to the visible indicator `<span>`. */ indicator?: TagProps<"span">["mix"]; }`` | Per-part styling for the option's hidden `input` and visible `indicator` elements, layered after each part's own built-in styling. Use the `mix` prop instead to style the option's outer `<label>` host. |

Also accepts everything in `Omit<TagProps<"label">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis a group's options lay out along: a single column, or a single row. |