Checkbox v0.5.0 · @behivetech

Examples of v0.5.0 are shown as code; only the latest version runs live. Open the live examples →

Basic Checkbox

1const BasicCheckbox = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <Checkbox
5      checked={checked}
6      onCheckedChange={(val) => setChecked(val === true)}
7    />
8  );
9};
10
11render(<BasicCheckbox />);

Checkbox With Form Field

1const CheckboxWithFormField = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <FormField
5      label="Accept terms and conditions"
6      htmlFor="accept-terms"
7      hint="You can withdraw consent at any time."
8    >
9      <Checkbox
10        id="accept-terms"
11        checked={checked}
12        onCheckedChange={(val) => setChecked(val === true)}
13      />
14    </FormField>
15  );
16};
17
18render(<CheckboxWithFormField />);

Checkbox With Error

1const CheckboxWithError = () => (
2  <FormField
3    label="Agree to terms"
4    htmlFor="agree"
5    error="You must agree to continue"
6  >
7    <Checkbox id="agree" invalid checked={false} onCheckedChange={() => {}} />
8  </FormField>
9);
10
11render(<CheckboxWithError />);

Indeterminate Checkbox

1const IndeterminateCheckbox = () => (
2  <Checkbox checked="indeterminate" onCheckedChange={() => {}} />
3);
4
5render(<IndeterminateCheckbox />);

Disabled Checkbox

1const DisabledCheckbox = () => (
2  <Checkbox disabled checked={false} onCheckedChange={() => {}} />
3);
4
5render(<DisabledCheckbox />);

Required Checkbox

1const RequiredCheckbox = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <FormField
5      label="I have read the privacy policy"
6      htmlFor="privacy"
7      required
8    >
9      <Checkbox
10        id="privacy"
11        required
12        checked={checked}
13        onCheckedChange={(val) => setChecked(val === true)}
14      />
15    </FormField>
16  );
17};
18
19render(<RequiredCheckbox />);