RadioGroup

Eine RadioGroup ermöglicht die Auswahl genau einer Option aus einer Gruppe.

Täglicher Kaffeekonsum(optional)

import {
  Label,
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components";

<RadioGroup defaultValue="more">
  <Label>Täglicher Kaffeekonsum</Label>
  <Radio value="more">Mehr als 6 Tassen</Radio>
  <Radio value="5-6">5-6 Tassen</Radio>
  <Radio value="3-4">3-4 Tassen</Radio>
  <Radio value="1-2">1-2 Tassen</Radio>
  <Radio value="none">Trinke keinen Kaffee</Radio>
</RadioGroup>

Best Practices

Beschrifte die RadioGroup mit einem Label‍. Übernimmt ein nahes Element wie eine Heading‍ diese Rolle, setze stattdessen aria-label bzw. aria-labelledby.
Nutze bei vielen Optionen ein Select‍, um die Oberfläche aufgeräumt zu halten. Als Faustregel ab etwa sieben Optionen.
Wähle zu Beginn eine sinnvolle Option vor. Das vermeidet unnötige Fehlermeldungen.
Ordne die Optionen nach Wichtigkeit. Die wichtigste steht oben; eine Option mit weitreichenden Folgen gehört nach unten und ist nie vorausgewählt.
Formuliere die Optionen klar unterscheidbar. So erkennt der User die passende Wahl auf einen Blick.
Folge in einem Formular dem Form-Pattern‍. Dort sind Aufbau, Validierung und Fehlerbehandlung geregelt.

States

In einer RadioGroup sollte immer eine sinnvolle Option vorausgewählt (Selected) sein.

Disabled

Um Optionen in der RadioGroup zu deaktivieren, lässt sich der Disabled-State für die gesamte RadioGroup oder gezielt für einzelne Radios bzw. RadioButtons setzen.

Error

Ein Error-State wird angezeigt, wenn etwas schiefgelaufen ist (siehe Fehlermeldungen‍). Da meist eine Option vorselektiert ist, wird er nur selten benötigt.

Datenbank-Typ(optional)Bitte wähle eine Option aus

RadioButtons

Um Inhalte stärker hervorzuheben und die Klickfläche zu vergrößern, lassen sich statt <Radio /> auch <RadioButton /> nutzen.

Datenbank-Typ(optional)

Weiterer Inhalt

Anstelle einer einfachen Bezeichnung kann der <RadioButton /> auch mit zusätzlichem Inhalt gefüllt werden. Verwende dazu innerhalb des <RadioButton /> Text‍ für eine Überschrift und <Content /> für Fließtext.

Benutzerdefinierte Spalten

Die RadioGroup verwendet das ColumnLayout‍, um eine Anpassung der Spalten zu ermöglichen. Bei der Verwendung von RadioButtons entspricht der Default dem des ColumnLayouts, während Radios im Default untereinander angezeigt werden.

Benutzerdefinierte Spalten(optional)

FieldDescription

Für eine kurze Hilfestellung zu den Optionen kann unterhalb der <Radio /> oder <RadioButton /> eine <FieldDescription /> eingebaut werden.

Wie viele Pflanzen besitzt du?(optional)Mehrere identische Pflanzen in einem Topf gelten als eine Pflanze.

Kombiniere mit …

ContextualHelp

Benutze die ContextualHelp‍ Component, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

Täglicher Kaffeekonsum(optional)

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form)‍.

Properties

Property	Type	Description
`children`	ReactNode
`className`	ClassNameOrFunction<RadioGroupRenderProps>default: 'react-aria-RadioGroup'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`defaultValue`	TimeValue	The default value (uncontrolled).
`dir`	string
`form`	string	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
`hidden`	boolean
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`isDisabled`	boolean	Whether the input is disabled.
`isInvalid`	boolean	Whether the input value is invalid.
`isReadOnly`	boolean	Whether the input can be selected but not changed by the user.
`isRequired`	boolean	Whether user input is required on the input before form submission.
`l`	(number \| null)[]	Column layout for container size l.
`lang`	string
`m`	(number \| null)[]	Column layout for container size m.
`name`	string	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
`orientation`	horizontal \| vertical (default)	The axis the Radio Button(s) should align with.
`render`	DOMRenderFunction<"div", TooltipRenderProps>	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`s`	(number \| null)[]	Column layout for container size s.
`slot`	string	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	StyleOrFunction<TooltipRenderProps>	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	yes \| no
`validate`	((value: TimeValue) => true \| ValidationError \| null)	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`validationBehavior`	native (default) \| aria	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`value`	TimeValue	The current value (controlled).
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Description
`onBlur`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element loses focus.
`onChange`	((value: TimeValue \| null) => void)	Handler that is called when the value changes.
`onClick`	MouseEventHandler<HTMLDivElement>
`onFocus`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element receives focus.
`onFocusChange`	((isFocused: boolean) => void)	Handler that is called when the element's focus status changes.

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-errormessage`	string	Identifies the element that provides an error message for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components

Integrations