‍

Components

Integrations

SegmentedControl

Ein SegmentedControl bietet eine Einfachauswahl aus 2 bis 5 kurzen Optionen.
GitHub‍Markdown‍
Zahlungsart(optional)
import {
  Label,
  Segment,
  SegmentedControl,
} from "@mittwald/flow-react-components";

<SegmentedControl defaultValue="lastschrift">
  <Label>Zahlungsart</Label>
  <Segment value="lastschrift">Lastschrift</Segment>
  <Segment value="Rechnung">Rechnung</Segment>
</SegmentedControl>

Best Practices

  • Zeige höchstens fünf kurze Optionen an. Ideal ist ein selbsterklärendes Wort, höchstens ein bis drei Wörter, ohne dass der Text zweizeilig wird.
  • Stelle die wichtigste Option zuerst. Sie wird automatisch vorselektiert.
  • Beschreibe die Optionen mit einem Label‍, falls sie im Zusammenhang nicht verständlich sind. Fehlt das Label, setze ein aria-label.

SegmentedControl vs. RadioGroup

SegmentedControl und RadioGroup‍ haben viele Gemeinsamkeiten.

Verwende ein SegmentedControl, um z. B. ...

  • eine Einfachauswahl von 2 bis 5 Optionen anzuzeigen.
  • Optionen anzuzeigen, die aus 1 bis 2 Wörtern bestehen.

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

  • eine Einfachauswahl von 2 bis ungefähr 7 Optionen anzuzeigen.
  • Optionen mit unterschiedlicher Textlänge darzustellen.

Mit Inhaltsänderung

Unterhalb des SegmentedControls kann sich der Inhalt je nach Auswahl ändern.

Zahlungsart(optional)

FieldDescription

Für eine kurze Hilfestellung zu den Optionen kann innerhalb des <SegmentedControl /> eine <FieldDescription /> eingebaut werden.

Speicherplatz(optional)Speicherplatz kann jederzeit geändert werden

Container Breakpoint Size

Sobald der Container schmaler als der gesetzte Breakpoint ist, stellt das SegmentedControl seine Optionen untereinander dar. Im Default passiert das bei 550 px (containerBreakpointSize="m"); über die Property lässt sich die Größe mit Werten zwischen xs und xl überschreiben. Achte darauf, dass der Text auch dann nicht zweizeilig oder unlesbar wird.

Rolle(optional)
Rolle(optional)

Disabled

Einzelne Optionen oder das gesamte SegmentedControl können über isDisabled deaktiviert werden. Achte darauf, dass aus dem Kontext klar wird, warum eine Option gerade nicht auswählbar ist.

Rolle(optional)
Rolle(optional)

Kombiniere mit …

ContextualHelp

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

Zahlungsart(optional)

React Hook Form

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

Zahlungsart

Properties

PropertyTypeDefaultDescription
childrenReactNode-
classNameClassNameOrFunction<RadioGroupRenderProps>'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.
containerBreakpointSizeContainerBreakpointSize-The breakpoint at which the element switches to its compact layout. Evaluated as a container query against the surrounding container, not against the viewport.
defaultValueTimeValue-The default value (uncontrolled).
dirstring-
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).
hiddenboolean-
idstring-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inertboolean-
isDisabledboolean-Whether the input is disabled.
isInvalidboolean-Whether the input value is invalid.
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.
langstring-
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).
orientationOrientation'vertical'The axis the Radio Button(s) should align with.
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.
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.
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.
translate"yes" | "no"-
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.
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.
valueTimeValue-The current value (controlled).
wrapWithReactElement<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

PropertyTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)-Handler that is called when the element loses focus.
onChange((value: TimeValue) => void)-Handler that is called when the value changes.
onClickMouseEventHandler<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

PropertyTypeDefaultDescription
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.
aria-labelstring-Defines a string value that labels the current element.
aria-labelledbystring-Identifies the element (or elements) that labels the current element.

Auf dieser Seite