‍

Components

Integrations

CheckboxGroup

Die CheckboxGroup fasst mehrere Checkboxen oder CheckboxButtons zusammen.
Berechtigungen(optional)
import {
  Checkbox,
  CheckboxGroup,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>Berechtigungen</Label>
  <Checkbox value="read">Lesen</Checkbox>
  <Checkbox value="write">Schreiben</Checkbox>
</CheckboxGroup>

Best Practices

  • Beschreibe die Gruppierung mit einem logischen, prägnanten Label.
  • Ordne die Checkboxen‍ bzw. CheckboxButtons‍ sinnvoll an. Möglich sind Relevanz, alphabetische oder thematische Gruppierung.
  • Halte die Zahl der Auswahlmöglichkeiten überschaubar. Zu viele Optionen überfordern schnell.

CheckboxGroup vs. RadioGroup

Mit einer CheckboxGroup oder mit einer RadioGroup‍ erhalten User verschiedene Auswahlmöglichkeiten.

Verwende eine RadioGroup, um z. B. ...

  • eine Einfachauswahl darzustellen.
  • Radios oder RadioButtons sinnvoll zu strukturieren.

CheckboxButtons

Eine CheckboxGroup kann entweder mit CheckboxButtons‍ oder Checkboxen‍ gefüllt werden.

Berechtigungen(optional)

Spalten

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

Berechtigungen(optional)

FieldDescription

Für eine kurze Hilfestellung zu den Auswahloptionen kann unterhalb der Gruppe eine <FieldDescription /> eingebaut werden.

Berechtigungen(optional)Weitere Informationen

Kombiniere mit …

ContextualHelp

Benutze die ContextualHelp‍, um weitere Informationen bereitzustellen.

Berechtigungen(optional)

React Hook Form

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

Berechtigungen

Properties

PropertyTypeDescription
children
ReactNode
className
ClassNameOrFunction<CheckboxGroupRenderProps>default: 'react-aria-CheckboxGroup'
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).
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

PropertyTypeDescription
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

PropertyTypeDescription
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.

Auf dieser Seite