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.

View code

<div mix={[vstack({ gap: 6, align: "stretch" })]}>
	<div mix={[vstack({ gap: 2, align: "stretch" })]}>
		<Header mix={[m(0)]}>Shipping method</Header>
		<RadioGroup aria-label="Shipping method" name="shippingMethod">
			{METHODS.map((method) => (
				<RadioGroup.Radio
					key={method.value}
					value={method.value}
					required
					defaultChecked={method.value === "express"}
					disabled={method.disabled}
					parts={{ input: [ariaChecked()] }}
					mix={[
						p(3),
						rounded("md"),
						border({ color: "neutral.border", width: 1 }),
						has("input:checked", [border("brand.ring"), bg("brand.tint")]),
					]}
				>
					<span mix={[vstack({ gap: 0.5, align: "start" })]}>
						<span mix={[text("sm"), weight("medium")]}>
							{method.label} · {method.price}
						</span>
						<span mix={[text("xs")]}>{method.eta}</span>
					</span>
				</RadioGroup.Radio>
			))}
		</RadioGroup>
	</div>

	<div mix={[vstack({ gap: 2, align: "stretch" })]}>
		<Header mix={[m(0)]}>Gift wrapping</Header>
		<RadioGroup aria-label="Gift wrapping" name="giftWrap" orientation="horizontal">
			<RadioGroup.Radio value="none" defaultChecked parts={{ input: [ariaChecked()] }}>
				None
			</RadioGroup.Radio>
			<RadioGroup.Radio value="paper" parts={{ input: [ariaChecked()] }}>
				Paper
			</RadioGroup.Radio>
			<RadioGroup.Radio value="box" parts={{ input: [ariaChecked()] }}>
				Gift box
			</RadioGroup.Radio>
		</RadioGroup>
	</div>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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.

Composition

The parts the component publishes, each a static property of the host.

RadioGroup
RadioGroup.RadioRenders 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.

Examples

<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

Read from the component's own types, so every prop, every default and every allowed value is listed.

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

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.