mittwald Flow Logo

Components

Select

Ein Select ermöglicht es Usern, eine einzelne Option aus einer vordefinierten Liste auszuwählen.GitHub
App
(optional)

Playground

Verwende <Select />, um einen Select darzustellen. Ein zugehöriges <Label /> sowie die gewünschte Anzahl an <Option />-Elementen werden innerhalb der Component eingefügt.

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>

Default-Wert

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

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

<Select defaultSelectedKey="wordpress" isRequired>
  <Label>App</Label>
  <Option value="wordpress">WordPress</Option>
  <Option value="typo3">TYPO3</Option>
</Select>

Kombiniere mit ...

FieldDescription

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

App
(optional)
Weitere Informationen
import {
  FieldDescription,
  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>
  <FieldDescription>Weitere Informationen</FieldDescription>
</Select>

Align

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

App
(optional)
import {
  Align,
  Button,
  Select,
  Label,
  Option,
} from "@mittwald/flow-react-components";

<Align>
  <Select>
    <Label>App</Label>
    <Option>WordPress</Option>
    <Option>TYPO3</Option>
    <Option>Contao</Option>
    <Option>Drupal</Option>
    <Option>Joomla!</Option>
    <Option>Matomo</Option>
  </Select>
  <Button>Hinzufügen</Button>
</Align>

ContextualHelp

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

App
(optional)
import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  Option,
  Select,
  Text,
} from "@mittwald/flow-react-components";

<Select>
  <Label>
    App
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
  <Option>WordPress</Option>
  <Option>TYPO3</Option>
  <Option>Contao</Option>
  <Option>Drupal</Option>
  <Option>Joomla!</Option>
  <Option>Matomo</Option>
</Select>

React Hook Form

App
import {
  Button,
  Label,
  Option,
  Section,
  Select,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-components/actions/action/examples/lib";

export default () => {
  const form = useForm<{ app: string }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="app"
          rules={{
            required: "Bitte wähle eine App aus",
          }}
        >
          <Select>
            <Label>App</Label>
            <Option value="wordpress">WordPress</Option>
            <Option value="typo3">TYPO3</Option>
          </Select>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview