mittwald Flow Logo

Components

CheckboxButton

Ein CheckboxButton ist eine optisch auffälligere Variante der Checkbox. Sie dient ebenfalls dazu, Optionen auszuwählen oder abzuwählen und wird häufig innerhalb der CheckboxGroup verwendet.GitHub

Playground

Verwende <CheckboxButton /> zusammen mit einer eingebetteten Beschriftung, um einen CheckboxButton darzustellen.

import { CheckboxButton } from "@mittwald/flow-react-components";

<CheckboxButton>
  Ich stimme den AGBs zu und bestätige, dass ich die
  Datenschutzhinweise zur Kenntnis genommen habe.
</CheckboxButton>

Kombiniere mit ...

React Hook Form

import {
  Button,
  CheckboxButton,
  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<{ acceptTerms: boolean }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="acceptTerms"
          rules={{ required: true }}
        >
          <CheckboxButton>
            Ich stimme den AGBs zu und bestätige, dass ich
            die Datenschutzhinweise zur Kenntnis genommen
            habe.
          </CheckboxButton>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview