All components (204)

Option group

Choice · RadioGroup

What it is and when to use it

A group of mutually exclusive options: one and only one is chosen, with all of them in view. Each option is a RadioOption inside the RadioGroup; outside of it, it makes no sense.

When to use it

From two to five options that are worth seeing at once before choosing: the payment method, the customer type, the shipping method.
In a form that is submitted with a button (with name, the value travels with it). orientation="vertical" when the texts are long or there are more than three.

When not to

Many options, or a list that does not need to be seen in full: Select.
Something that applies immediately (the view of a table, the period of a report): SegmentedGroup.
Choosing several: Checkbox, or FilterGroup in the facets of a catalog.

Keyboard: each option is a native radio of the same group, so the navigation is the browser's: a single Tab to enter and leave the group, and the arrows (all four) move the selection and choose at the same time; at the end they wrap around. Disabled options are skipped.

Accessibility: it is a radiogroup named after its label. The label, the help (hint) and the error (error) are those of the fields (with an asterisk if required); the help and the error are read as the group's description, and the error marks it as invalid. The dot of each option is decorative: the name is its text, and an option's description is read after it.

Sizes: size applies to the whole group: dot of 14, 16 or 20 px, with its font, and the label, the help and the error of that field size. With a finger, each option reaches 44 px.

States: hover, pressed, keyboard focus, chosen (the inner dot grows), invalid, read-only (dashed border and dot in ink color) and disabled.

Fine-tuning: variables --amset-radius-group-dot, -brand (the inner dot), -font, -description, -border, -background, -checked and -target (the minimum size of each option). They are not --amset-radius-*: those are for the corners.

What it looks like

Shipping method

Home deliveryPickup in storePost office

Home deliveries ship the same day if you order before 2:00 pm

Payment method

CardBizumBank transfer

<RadioGroup label="Shipping method" orientation="vertical" defaultValue="domicilio">
  <RadioOption value="domicilio" description="Within 24-48 hours · EUR 4.95">Home delivery</RadioOption>
  <RadioOption value="store" description="14 Colon Street, Valencia · free">Pickup in store</RadioOption>
  <RadioOption value="correos" description="The office you choose · 2.95 EUR">Post office</RadioOption>
</RadioGroup>

Props

Import it with import { RadioGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`label`required	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultValue`	`string`	The option chosen at the start, governing itself internally.
`disabled`	`boolean`	—
`error`	`string`	—
`hint`	`string`	—
`invalid`	`boolean`	—
`name`	`string`	The name it travels under in the form.
`onBlur`	`(event: FocusEvent<HTMLDivElement>) => void`	—
`onChange`	`(value: string) => void`	—
`orientation`	`RadioOrientation`	—
`readOnly`	`boolean`	It is read and focused, but does not change.
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	Size of every option in the group (14, 16 or 20 px dot and its text) and of the label, hint and error, as in a field.
`value`	`string \| null`	The chosen option, governed from outside. `null` means "none".

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: