# ListBox

> A run of selectable option rows sharing one native grouping name — each ListBox.Item pairs a visually hidden `<input type="radio">` or `<input type="checkbox">` with its own visible content, so every focus, keyboard, and form-submission semantic keeps coming from the platform itself.

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

Renders the group host: a `<div>` laying its ListBox.Item options
out as a scrollable column capped at a fixed block size and rounded
concentric with its rows, with `role` defaulting to `"radiogroup"` for
single selection or `"group"` for `multiple`.

## Examples

```tsx
<ListBox aria-label={t("settings.theme")}>
	<ListBox.Item value="light" defaultChecked>{t("settings.themeLight")}</ListBox.Item>
	<ListBox.Item value="dark">{t("settings.themeDark")}</ListBox.Item>
	<ListBox.Item value="system">{t("settings.themeSystem")}</ListBox.Item>
</ListBox>
```

```tsx
<ListBox aria-label={t("settings.notifications")} multiple>
	<Section aria-labelledby="notifications-heading">
		<Header id="notifications-heading">{t("settings.channels")}</Header>
		<ListBox.Item value="email" defaultChecked>{t("settings.email")}</ListBox.Item>
		<ListBox.Item value="sms">{t("settings.sms")}</ListBox.Item>
	</Section>
</ListBox>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `name?` | `string` | Native grouping name shared by every ListBox.Item nested inside, provided through component context. Defaults to the group's own stable instance id, so options always group correctly. |
| `multiple?` | `boolean` | Renders every option as a checkbox, allowing more than one selected at once, instead of the default mutually exclusive radio behavior. Defaults to DEFAULT_MULTIPLE. |

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


### ListBox.Item

Renders a single option: a native `<label>` pairing a visually hidden radio or checkbox input with the option's content.

| 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 ListBox — 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 never tracks selection itself. |
| `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` | Sets the underlying input's native `required` attribute. On a radio input this requires at least one option in the group be selected; on a checkbox input it requires this specific option be checked. |
| `children?` | `RemixNode` | The option's visible content, associated with the input by native nesting. |
| `parts?` | ``{ /** Additional mixin(s) applied to the hidden native `<input>`. */ input?: TagProps<"input">["mix"]; }`` | Per-part styling for the option's hidden `input` element, layered after its 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">`.