Checkbox

A control that allows the user to toggle between checked and unchecked.

Email Preferences

Select your preferences

Send me product updates

Send me promotional offers

Usage

emailPreferences.tsx

import { Checkbox, CheckboxGroup, Label } from "@uj-vilag/dap-components";

export default function EmailPreferences() {
  return (
    <Label
      labelText="Email Preferences"
      mode="legend"
      helperText="Select your preferences"
      className="gap-dap-400"
    >
      <CheckboxGroup>
        <Checkbox background defaultChecked={true} id="product-updates">
          <Label
            labelText="Send me product updates"
            variant="subtle"
            htmlFor="product-updates"
          />
        </Checkbox>
        <Checkbox background id="promotional-offers">
          <Label
            labelText="Send me promotional offers"
            variant="subtle"
            htmlFor="promotional-offers"
          />
        </Checkbox>
      </CheckboxGroup>
    </Label>
  );
}

Props

This component is built on top of Radix UI's Checkbox. See the documentation for more details.

Prop

Type

Checkbox Group

The <CheckboxGroup> component can be used to group multiple checkboxes together. It does not provide any additional functionality by itself but it preapplies the necessary layout styles.

checkboxGroup.tsx

type CheckboxGroupProps = {
  children: React.ReactNode;
  className?: string;
};

export function CheckboxGroup(props: CheckboxGroupProps) {
  const { children, className } = props;

  return (
    <div className={cn("flex flex-col gap-dap-300 w-full", className)}>
      {children}
    </div>
  );
}

Examples

Default

defaultCheckbox.tsx

import { Checkbox, CheckboxGroup, Label } from "@uj-vilag/dap-components";

export default function DefaultCheckbox() {
  return (
    <Label labelText="Email Preferences" mode="legend" className="w-100">
      <CheckboxGroup>
        <Checkbox defaultChecked={true} id="default-product-updates">
          <Label
            labelText="Send me product updates"
            variant="subtle"
            htmlFor="default-product-updates"
          />
        </Checkbox>
        <Checkbox
          defaultChecked="indeterminate"
          id="default-promotional-offers"
        >
          <Label
            labelText="Send me promotional offers"
            variant="subtle"
            htmlFor="default-promotional-offers"
          />
        </Checkbox>
        <Checkbox id="default-weekly-newsletters">
          <Label
            labelText="Send me weekly newsletters"
            variant="subtle"
            htmlFor="default-weekly-newsletters"
          />
        </Checkbox>
        <Checkbox aria-invalid={true} id="default-special-offers">
          <Label
            labelText="Send me special offers"
            variant="subtle"
            htmlFor="default-special-offers"
          />
        </Checkbox>
        <Checkbox
          disabled={true}
          defaultChecked={true}
          id="default-account-activity"
        >
          <Label
            labelText="Send me account activity emails"
            variant="subtle"
            htmlFor="default-account-activity"
          />
        </Checkbox>
      </CheckboxGroup>
    </Label>
  );
}

Background & Border

bgBorderCheckbox.tsx

import { Checkbox, CheckboxGroup, Label } from "@uj-vilag/dap-components";

export default function BgBorderCheckbox() {
  return (
    <Label labelText="Email Preferences" mode="legend">
      <CheckboxGroup>
        <Checkbox background defaultChecked={true} id="bg-product-updates">
          <Label
            labelText="Send me product updates"
            variant="subtle"
            htmlFor="bg-product-updates"
          />
        </Checkbox>
        <Checkbox
          background
          defaultChecked="indeterminate"
          id="bg-promotional-offers"
        >
          <Label
            labelText="Send me promotional offers"
            variant="subtle"
            htmlFor="bg-promotional-offers"
          />
        </Checkbox>
        <Checkbox background border id="bg-weekly-newsletters">
          <Label
            labelText="Send me weekly newsletters"
            variant="subtle"
            htmlFor="bg-weekly-newsletters"
          />
        </Checkbox>
        <Checkbox background border aria-invalid={true} id="bg-special-offers">
          <Label
            labelText="Send me special offers"
            variant="subtle"
            htmlFor="bg-special-offers"
          />
        </Checkbox>
        <Checkbox
          background
          border
          disabled={true}
          defaultChecked={true}
          id="bg-account-activity"
        >
          <Label
            labelText="Send me account activity emails"
            variant="subtle"
            htmlFor="bg-account-activity"
          />
        </Checkbox>
      </CheckboxGroup>
    </Label>
  );
}

Sizes

The size of the checkbox card mainly depends on the size of the label text, the checkbox itself only adjusts the padding around it.

Large checkbox

Small checkbox

xSmall checkbox

checkboxSizes.tsx

import { Checkbox, CheckboxGroup, Label } from "@uj-vilag/dap-components";

export default function CheckboxSizes() {
  return (
    <CheckboxGroup>
      <Checkbox background size="large" id="size-large">
        <Label
          labelText="Large checkbox"
          variant="subtle"
          size="large"
          htmlFor="size-large"
        />
      </Checkbox>
      <Checkbox background size="small" id="size-small">
        <Label
          labelText="Small checkbox"
          variant="subtle"
          size="small"
          htmlFor="size-small"
        />
      </Checkbox>
      <Checkbox background size="xSmall" id="size-xsmall">
        <Label
          labelText="xSmall checkbox"
          variant="subtle"
          size="xSmall"
          htmlFor="size-xsmall"
        />
      </Checkbox>
    </CheckboxGroup>
  );
}

Recommendations

The focus ring by default consists of a white and a colored ring, but when the checkbox is unchecked but focused, the checkbox card might appear larger than it should.

Unfocused example

Focused example

To avoid this change the inner focus ring styles to match the color of the background:
className="focus-within:ring-offset-{background-color}"

Fixed focus example

checkboxFocus.tsx

import { Checkbox, Label } from "@uj-vilag/dap-components";

export default function CheckboxFocus() {
  return (
    <div className="p-28 flex-col gap-dap-300 bg-dap-bg-neutral-disabled">
      <Checkbox
        background
        id="focus-recommendation-fixed"
        checked={false}
        className="w-full focus-within:ring-offset-dap-bg-neutral-disabled"
      >
        <Label
          labelText="Fixed focus example"
          variant="subtle"
          htmlFor="focus-recommendation-fixed"
        />
      </Checkbox>
    </div>
  );
}

Button

Displays a button or a component that looks like a button.

Feedback

Provide inline feedback messages that guide users while they fill out inputs.

Checkbox

On this page