One choice out of a few that all stay in view (radio buttons, option group). Each option may carry a sentence that explains it.
import { RadioGroup } from "@umriss-ui/core";
The group is one tab stop; the arrow keys move and choose at once, skipping disabled options, which stay visible.
Pass the choices as options; the group takes one tab stop, and the arrow keys move and choose at once.
import { useState } from "react";
import { FormField, RadioGroup } from "@umriss-ui/core";
export default function RadioGroupExample() {
const [attempt, setAttempt] = useState("neighbour");
return (
<FormField label="If nobody is home">
<RadioGroup
value={attempt}
onChange={setAttempt}
options={[
{ value: "door", label: "Leave at the door" },
{ value: "neighbour", label: "Hand to a neighbour" },
{ value: "depot", label: "Take back to the depot" },
]}
/>
</FormField>
);
}
Give an option a description when the choice needs a sentence; a disabled option stays visible and is skipped.
import { useState } from "react";
import { FormField, RadioGroup } from "@umriss-ui/core";
export default function Descriptions() {
const [service, setService] = useState("standard");
return (
<FormField label="Delivery service" style={{ maxWidth: 480 }}>
<RadioGroup
value={service}
onChange={setService}
options={[
{ value: "standard", label: "Standard", description: "Within two working days, at no extra charge." },
{ value: "next-day", label: "Next day", description: "Booked before 14:00, delivered the next working day." },
{ value: "same-day", label: "Same day", description: "Booked before 10:00, delivered by 18:00 within the city." },
{ value: "pick-up", label: "Pick-up point", description: "No pick-up point within 2 km of this address.", disabled: true },
]}
/>
</FormField>
);
}
Set orientation="horizontal" for a few short labels without descriptions.
import { useState } from "react";
import { FormField, RadioGroup } from "@umriss-ui/core";
export default function SideBySide() {
const [part, setPart] = useState("full");
return (
<FormField label="Leave on Friday, 20 March">
<RadioGroup
orientation="horizontal"
value={part}
onChange={setPart}
options={[
{ value: "morning", label: "Morning" },
{ value: "afternoon", label: "Afternoon" },
{ value: "full", label: "Full day" },
]}
/>
</FormField>
);
}
With no defaultValue nothing is chosen yet; errors come from the FormField, and disabled on the group locks every option.
import { FormField, Grid, RadioGroup } from "@umriss-ui/core";
const KINDS = [
{ value: "annual", label: "Annual leave" },
{ value: "sick", label: "Sick leave" },
{ value: "training", label: "Training, counted as working time but blocked for project work" },
];
export default function States() {
return (
<Grid minItemWidth="240px" gap={5}>
<FormField label="Kind of absence" error="Choose the kind of absence.">
<RadioGroup options={KINDS} />
</FormField>
<FormField label="Kind of absence" hint="Approved, no longer editable.">
<RadioGroup options={KINDS} defaultValue="annual" disabled />
</FormField>
<FormField label="Kind of absence" hint="Small size.">
<RadioGroup size="sm" options={KINDS} defaultValue="training" />
</FormField>
</Grid>
);
}
| Key | Action |
|---|---|
Tab |
Moves into the group, onto the chosen option, and out again. |
Arrow Down / Arrow Right |
Chooses the next option, wrapping at the end. |
Arrow Up / Arrow Left |
Chooses the previous option. |
RadioGroupProps<T extends string>| Name | Type | Default | Description |
|---|---|---|---|
optionsrequired | readonly RadioOption<T>[] | — | The possibilities, in the order in which they are meant to stand. Shown in: Configurator, Radio group, Descriptions and 5 more |
defaultValue | T | null | — | Initial value of an uncontrolled group. Not together with value.Shown in: Configurator, States, A row of fields (Sizes) |
value | T | null | — | The chosen possibility; null means: none yet. Together with
onChange the group is controlled.Shown in: Radio group, Descriptions, Side by side and 2 more |
orientation | "vertical" | "horizontal" | "vertical" | Arrangement: one below the other, or side by side. Shown in: Configurator, Side by side, A row of fields (Sizes) |
size | "sm" | "md" | the size of a ControlSizeProvider around it, else "md" | sm for a toolbar and dense forms, md otherwise.Shown in: Configurator, States |
disabled | boolean | false | Disables the whole group. RadioOption disables single
possibilities.Shown in: Configurator, States |
name | string | a generated one | Name of the radio group within the form. |
ref | Ref<HTMLDivElement> | — | Receives the component's root element. from RefPropShown in: A row that holds still (Sizes), An anchored surface (Popover), Take the width of the trigger (Popover) and 2 more |
| Name | Type | Default | Description |
|---|---|---|---|
onChange | (value: T) => void | — | Runs on every choice – on the one made with the arrow keys as well. Shown in: Radio group, Descriptions, Side by side and 2 more |
Also takes every attribute of <div> – without defaultValue, onChange.
RadioOption<T extends string>| Name | Type | Default | Description |
|---|---|---|---|
valuerequired | T | — | What comes back when this possibility is chosen. Shown in: Radio group, Descriptions, Side by side and 3 more |
labelrequired | ReactNode | — | What stands beside it. Shown in: Radio group, Descriptions, Side by side and 3 more |
description | ReactNode | — | Line of explanation under the label; it is read out as well. Shown in: Descriptions, Approve spending against a budget (Scenarios), Set up a team (Scenarios) |
disabled | boolean | — | Takes the possibility out of the choice but leaves it visible: a
choice that does not exist is a different statement from one that may
not be made. Shown in: Descriptions, Approve spending against a budget (Scenarios) |