‍

Components

Integrations

Switch

Ein Switch schaltet eine Option unmittelbar ein oder aus.
import {
  Label,
  Switch,
} from "@mittwald/flow-react-components";

<Switch defaultSelected>
  <Label>Autoresponder</Label>
</Switch>

Best Practices

  • Übernimm Änderungen sofort, ohne zusätzlichen Speichern-Button.
  • Beschreibe die Funktion mit einem klaren, prägnanten Label, meist ein bis drei Wörter.
  • Halte die Beschriftung unabhängig vom Zustand des Switches gleich.

Label-Position: Links

Die Positionierung des Labels sollte sich am Seitenlayout orientieren. Steht der Switch rechtsbündig, sollte die Beschriftung links davor platziert werden. So erfasst der User zuerst den Zweck, bevor die Aktion ausgeführt wird.

Disabled

In Ausnahmefällen kann ein deaktivierter Switch verwendet werden, um eine Funktion temporär als nicht verfügbar darzustellen, ohne diesen vollständig aus der Oberfläche zu entfernen.

Properties

PropertyTypeDescription
autoFocus
boolean
Whether the element should receive focus on render.
children
ReactNode
className
ClassNameOrFunction<SwitchRenderProps>default: 'react-aria-Switch'
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.
defaultSelected
boolean
Whether the element should be selected (uncontrolled).
dir
string
excludeFromTabOrder
boolean
Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
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.
isReadOnly
boolean
Whether the input can be selected but not changed by the user.
isSelected
boolean
Whether the element should be selected (controlled).
labelPosition
leading | trailing (default)
Whether the label should appear before or after the switch.
lang
string
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.
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
value
string
The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
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
((isSelected: boolean) => void)
Handler that is called when the element's selection state changes.
onClick
((e: MouseEvent<FocusableElement, MouseEvent>) => void)
**Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.
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.
onHoverChange
((isHovering: boolean) => void)
Handler that is called when the hover state changes.
onHoverEnd
((e: HoverEvent) => void)
Handler that is called when a hover interaction ends.
onHoverStart
((e: HoverEvent) => void)
Handler that is called when a hover interaction starts.
onKeyDown
((e: KeyboardEvent) => void)
Handler that is called when a key is pressed.
onKeyUp
((e: KeyboardEvent) => void)
Handler that is called when a key is released.
onPress
((e: PressEvent) => void)
Handler that is called when the press is released over the target.
onPressChange
((isPressed: boolean) => void)
Handler that is called when the press state changes.
onPressEnd
((e: PressEvent) => void)
Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart
((e: PressEvent) => void)
Handler that is called when a press interaction starts.
onPressUp
((e: PressEvent) => void)
Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

Accessibility

PropertyTypeDescription
aria-controls
string
Identifies the element (or elements) whose contents or presence are controlled by the current element.
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