CheckboxGroup

Die CheckboxGroup fasst mehrere Checkboxen oder CheckboxButtons logisch in einer Gruppierung zusammen.
GitHubMarkdown

Grundlagen

Best Practices

Achte bei der Verwendung einer CheckboxGroup darauf, dass ...

  • das Label die Gruppierung logisch und prägnant beschreibt.
  • die Reihenfolge der Checkboxen bzw. CheckboxButtons sinnvoll gewählt ist – zum Beispiel nach Relevanz, alphabetisch oder thematisch gruppiert.
  • die Anzahl der Auswahlmöglichkeiten überschaubar bleibt. Zu viele Optionen führen schnell zu Überforderung.

Verwendung

Verwende eine CheckboxGroup, um ...

  • mehrere Checkboxen oder CheckboxButtons sinnvoll zu strukturieren.
  • dem User eine Mehrfachauswahl anzubieten.

CheckboxGroup vs. RadioGroup

Mit einer CheckboxGroup oder mit einer RadioGroup erhalten User verschiedene Auswahlmöglichkeiten. Um die beiden besser unterscheiden zu können, hier ein paar hilfreiche Anhaltspunkte.

Verwende eine CheckboxGroup, um z. B. ...

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

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

Playground

Verwende <CheckboxGroup /> zusammen mit mehreren <Checkbox /> oder <CheckboxButtons />, um eine CheckboxGroup darzustellen. Über der CheckboxGroup kann ein beschreibendes Label verwendet werden.

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>

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)

Kombiniere mit ...

FieldDescription

Um wichtige Hinweise zu den Auswahloptionen der CheckboxGroup bereitzustellen, kann unterhalb der Gruppe eine <FieldDescription /> eingebaut werden.

Berechtigungen(optional)Weitere Informationen

ContextualHelp

Benutze das ContextualHelp, um weitere Informationen bereitstellen zu können.

Berechtigungen(optional)

React Hook Form

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

Berechtigungen

Properties

PropertyTypeDefaultDescription
classNameClassNameOrFunction<CheckboxGroupRenderProps>'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.
styleStyleOrFunction<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.
renderDOMRenderFunction<"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.
dirstring-
langstring-
hiddenboolean-
inertboolean-
translate"yes" | "no"-
validationBehavior"native" | "aria"'native'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.
isDisabledboolean-Whether the input is disabled.
isReadOnlyboolean-Whether the input can be selected but not changed by the user.
isRequiredboolean-Whether user input is required on the input before form submission.
isInvalidboolean-Whether the input value is invalid.
validate((value: TimeValue) => true | ValidationError)-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.
valueTimeValue-The current value (controlled).
defaultValueTimeValue-The default value (uncontrolled).
idstring-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
namestring-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).
formstring-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).
slotstring-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.
childrenReactNode-
s(number)[]-Column layout for container size s.
m(number)[]-Column layout for container size m.
l(number)[]-Column layout for container size l.
wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
refRef<HTMLSpanElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
keyKey-

Events

PropertyTypeDefaultDescription
onClickMouseEventHandler<HTMLDivElement>-
onClickCaptureMouseEventHandler<HTMLDivElement>-
onAuxClickMouseEventHandler<HTMLDivElement>-
onAuxClickCaptureMouseEventHandler<HTMLDivElement>-
onContextMenuMouseEventHandler<HTMLDivElement>-
onContextMenuCaptureMouseEventHandler<HTMLDivElement>-
onDoubleClickMouseEventHandler<HTMLDivElement>-
onDoubleClickCaptureMouseEventHandler<HTMLDivElement>-
onMouseDownMouseEventHandler<HTMLDivElement>-
onMouseDownCaptureMouseEventHandler<HTMLDivElement>-
onMouseEnterMouseEventHandler<HTMLDivElement>-
onMouseLeaveMouseEventHandler<HTMLDivElement>-
onMouseMoveMouseEventHandler<HTMLDivElement>-
onMouseMoveCaptureMouseEventHandler<HTMLDivElement>-
onMouseOutMouseEventHandler<HTMLDivElement>-
onMouseOutCaptureMouseEventHandler<HTMLDivElement>-
onMouseOverMouseEventHandler<HTMLDivElement>-
onMouseOverCaptureMouseEventHandler<HTMLDivElement>-
onMouseUpMouseEventHandler<HTMLDivElement>-
onMouseUpCaptureMouseEventHandler<HTMLDivElement>-
onTouchCancelTouchEventHandler<HTMLDivElement>-
onTouchCancelCaptureTouchEventHandler<HTMLDivElement>-
onTouchEndTouchEventHandler<HTMLDivElement>-
onTouchEndCaptureTouchEventHandler<HTMLDivElement>-
onTouchMoveTouchEventHandler<HTMLDivElement>-
onTouchMoveCaptureTouchEventHandler<HTMLDivElement>-
onTouchStartTouchEventHandler<HTMLDivElement>-
onTouchStartCaptureTouchEventHandler<HTMLDivElement>-
onPointerDownPointerEventHandler<HTMLDivElement>-
onPointerDownCapturePointerEventHandler<HTMLDivElement>-
onPointerMovePointerEventHandler<HTMLDivElement>-
onPointerMoveCapturePointerEventHandler<HTMLDivElement>-
onPointerUpPointerEventHandler<HTMLDivElement>-
onPointerUpCapturePointerEventHandler<HTMLDivElement>-
onPointerCancelPointerEventHandler<HTMLDivElement>-
onPointerCancelCapturePointerEventHandler<HTMLDivElement>-
onPointerEnterPointerEventHandler<HTMLDivElement>-
onPointerLeavePointerEventHandler<HTMLDivElement>-
onPointerOverPointerEventHandler<HTMLDivElement>-
onPointerOverCapturePointerEventHandler<HTMLDivElement>-
onPointerOutPointerEventHandler<HTMLDivElement>-
onPointerOutCapturePointerEventHandler<HTMLDivElement>-
onGotPointerCapturePointerEventHandler<HTMLDivElement>-
onGotPointerCaptureCapturePointerEventHandler<HTMLDivElement>-
onLostPointerCapturePointerEventHandler<HTMLDivElement>-
onLostPointerCaptureCapturePointerEventHandler<HTMLDivElement>-
onScrollUIEventHandler<HTMLDivElement>-
onScrollCaptureUIEventHandler<HTMLDivElement>-
onWheelWheelEventHandler<HTMLDivElement>-
onWheelCaptureWheelEventHandler<HTMLDivElement>-
onAnimationStartAnimationEventHandler<HTMLDivElement>-
onAnimationStartCaptureAnimationEventHandler<HTMLDivElement>-
onAnimationEndAnimationEventHandler<HTMLDivElement>-
onAnimationEndCaptureAnimationEventHandler<HTMLDivElement>-
onAnimationIterationAnimationEventHandler<HTMLDivElement>-
onAnimationIterationCaptureAnimationEventHandler<HTMLDivElement>-
onTransitionCancelTransitionEventHandler<HTMLDivElement>-
onTransitionCancelCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionEndTransitionEventHandler<HTMLDivElement>-
onTransitionEndCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionRunTransitionEventHandler<HTMLDivElement>-
onTransitionRunCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionStartTransitionEventHandler<HTMLDivElement>-
onTransitionStartCaptureTransitionEventHandler<HTMLDivElement>-
onFocus((e: FocusEvent<Element, Element>) => void)-Handler that is called when the element receives focus.
onBlur((e: FocusEvent<Element, Element>) => void)-Handler that is called when the element loses focus.
onFocusChange((isFocused: boolean) => void)-Handler that is called when the element's focus status changes.
onChange((value: TimeValue) => void)-Handler that is called when the value changes.

Accessibility

PropertyTypeDefaultDescription
aria-labelstring-Defines a string value that labels the current element.
aria-labelledbystring-Identifies the element (or elements) that labels the current element.
aria-describedbystring-Identifies the element (or elements) that describes the object.
aria-detailsstring-Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-errormessagestring-Identifies the element that provides an error message for the object.

Auf dieser Seite