Build / Atoms

Radio

atom
play-fn

A set of mutually exclusive options.

Renders a real <fieldset>/<legend>, which is what tells assistive tech the options belong together, and distributes name/value to its Radio children so each option stays a one-liner.

import { RadioGroup } from '@meetcard/deck'

Example

<RadioGroup label="Card visibility" value={v} onChange={setV}> <Radio value="public" label="Anyone with the link" /> <Radio value="private" label="Only me" /> </RadioGroup>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Controlled usage — RadioGroup distributes name and value to options.

Default

Source

const Default = args => {
    const [value, setValue] = useState('link')

    return (
        <RadioGroup
            label="Card visibility"
            value={value}
            onChange={(next) => {
              setValue(next)
              args.onChange?.(next)
            }}>
            <Radio value="link" label="Anyone with the link" />
            <Radio value="connections" label="My connections" />
            <Radio value="private" label="Only me" />
        </RadioGroup>
    );
};

With descriptions, when the options differ by consequence rather than by name.

With Descriptions

Source

const WithDescriptions = () => <RadioGroup label="Card visibility">
    <Radio
        value="link"
        label="Anyone with the link"
        description="Best for conferences and open networking." />
    <Radio
        value="private"
        label="Only me"
        description="Your card stays hidden until you share it directly." />
</RadioGroup>;

In error, for a required choice left unanswered.

With Error

Source

const WithError = () => <RadioGroup label="Card visibility" error="Choose who can see your card">
    <Radio value="link" label="Anyone with the link" />
    <Radio value="private" label="Only me" />
</RadioGroup>;

Disabled, with the current choice still shown.

Disabled

Source

const Disabled = () => <RadioGroup label="Card visibility" disabled value="link">
    <Radio value="link" label="Anyone with the link" />
    <Radio value="private" label="Only me" />
</RadioGroup>;

Props

Prop	Type	Default	Description
`children`required	`ReactNode`	—	—
`label`required	`ReactNode`	—	Group label, rendered as a `<legend>`.
`className`	`string`	—	—
`description`	`ReactNode`	—	—
`disabled`	`boolean`	—	—
`error`	`ReactNode`	—	—
`hideLabel`	`boolean`	`false`	—
`name`	`string`	—	Shared form control name. Generated when omitted.
`onChange`	`(value: string) => void`	—	—
`value`	`string`	—	—