Radio Group

@sushindustries/ui

Radios in a fieldset - the one grouping screen readers announce without help.

4 min read
View as MarkdownEdit on GitHub

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/radio-group.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/radio-group.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { RadioGroup } from "@sushindustries/ui";
import { useState } from "react";

export function CheckoutForm() {
	const [speed, setSpeed] = useState("standard");

	return (
		<form className="flex flex-col gap-6">
			<RadioGroup
				label="Shipping speed"
				options={[
					{ value: "standard", label: "Standard - 3 to 5 days" },
					{ value: "express", label: "Express - next day" },
				]}
				value={speed}
				onChange={setSpeed}
			/>
		</form>
	);
}
tsx