mittwald Flow Logo

Components

CheckboxGroup

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

Playground

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

Berechtigungen
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
import {
  CheckboxButton,
  CheckboxGroup,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>Berechtigungen</Label>
  <CheckboxButton value="read">Lesen</CheckboxButton>
  <CheckboxButton value="write">Schreiben</CheckboxButton>
</CheckboxGroup>

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
import {
  CheckboxButton,
  CheckboxGroup,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup l={[1, 1]} m={[1]}>
  <Label>Berechtigungen</Label>
  <CheckboxButton value="read">Lesen</CheckboxButton>
  <CheckboxButton value="write">Schreiben</CheckboxButton>
</CheckboxGroup>

Kombiniere mit ...

FieldDescription

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

Berechtigungen
Weitere Informationen
import {
  Checkbox,
  CheckboxGroup,
  FieldDescription,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>Berechtigungen</Label>
  <Checkbox value="read">Lesen</Checkbox>
  <Checkbox value="write">Schreiben</Checkbox>
  <FieldDescription>Weitere Informationen</FieldDescription>
</CheckboxGroup>

ContextualHelp

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

Berechtigungen
import {
  Button,
  Checkbox,
  CheckboxGroup,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>
    Berechtigungen
    <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>
  <Checkbox value="read">Lesen</Checkbox>
  <Checkbox value="write">Schreiben</Checkbox>
</CheckboxGroup>

React Hook Form

Berechtigungen
import {
  Button,
  Checkbox,
  CheckboxGroup,
  Label,
  Section,
} 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<{ permissions: string[] }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="permissions"
          rules={{
            required:
              "Bitte wähle mindestens eine Berechtigung aus",
          }}
        >
          <CheckboxGroup>
            <Label>Berechtigungen</Label>
            <Checkbox value="read">Lesen</Checkbox>
            <Checkbox value="write">Schreiben</Checkbox>
          </CheckboxGroup>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview