Select

Ein Select ermöglicht es Usern, eine einzelne Option aus einer vordefinierten Liste auszuwählen.

App(optional)

import {
  Label,
  Option,
  Select,
} from "@mittwald/flow-react-components";

<Select>
  <Label>App</Label>
  <Option>WordPress</Option>
  <Option>TYPO3</Option>
  <Option>Contao</Option>
  <Option>Drupal</Option>
  <Option>Joomla!</Option>
  <Option>Matomo</Option>
</Select>

Best Practices

Formuliere das Label‍ kurz und deutlich.
Nutze einen Placeholder mit klarer Handlungsaufforderung, wenn kein sinnvoller Default existiert. Ein Beispiel ist „Sprache wählen".
Benenne die Optionen verständlich und konsistent.
Halte die Zahl der Optionen überschaubar. Bei sehr vielen Einträgen eignet sich eher eine ComboBox‍.
Ordne die Optionen nachvollziehbar. Möglich sind alphabetische, thematische oder Relevanz-Sortierung.

Default-Wert

Mit defaultSelectedKey kann eine Default-Option angegeben werden, die dem User standardmäßig zuerst angezeigt wird.

App

Multiple

Über selectionMode kann zwischen den Modi single und multiple gewechselt werden.

App(optional)

Mit FieldDescription

Um wichtige Hinweise zu den Auswahloptionen des Select bereitzustellen, kann unterhalb eine <FieldDescription /> eingebaut werden.

App(optional)Weitere Informationen

Kombiniere mit ...

Combine

Benutze die Combine‍ Component, um beispielsweise einen Button‍ neben dem Select zu platzieren.

App(optional)

ContextualHelp

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

App(optional)

React Hook Form

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

Properties

Property	Type	Description
`allowsEmptyCollection`	boolean	Whether the select should be allowed to be open when the collection is empty.
`autoComplete`	string	Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
`autoFocus`	boolean	Whether the element should receive focus on render.
`children`	ReactNode
`className`	string	The elements class name.
`defaultOpen`	boolean	Sets the default open state of the menu.
`defaultSelectedKey`	Key	The initial selected key in the collection (uncontrolled). @deprecated
`defaultValue`	TimeValue	The default value (uncontrolled).
`dir`	string
`disabledKeys`	Iterable<Key>	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`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.
`isInvalid`	boolean	Whether the input value is invalid.
`isOpen`	boolean	Sets the open state of the menu.
`isReadOnly`	boolean	Whether the component is read only.
`isRequired`	boolean	Whether user input is required on the input before form submission.
`lang`	string
`name`	string	The name of the input, used when submitting an HTML form.
`placeholder`	stringdefault: 'Select an item' (localized)	Temporary text that occupies the select when it is empty.
`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.
`selectedKey`	Key	The currently selected key in the collection (controlled). @deprecated
`selectionMode`	multiple \| single (default)	Whether single or multiple selection is enabled.
`shouldCloseOnSelect`	boolean	Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise.
`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: Key \| Key[] \| null) => void)	Handler that is called when the selected 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.
`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.
`onOpenChange`	((isOpen: boolean) => void)	Method that is called when the open state of the menu changes.
`onSelectionChange`	((value: Key \| Key[] \| null) => void)	Handler that is called when the selection changes. @deprecated Use `onChange` instead.

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

Select

Best Practices

Default-Wert

Multiple

Mit FieldDescription

Kombiniere mit ...

Combine

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite