Checkbox

Example

A form control that allows users to select one or more options from a set.

import { Checkbox } from "@yummacss/ui";
import { CheckIcon } from "@radix-ui/react-icons";

export default function Page() {
  return (
    <div className="d-if ai-c cg-2">
      <Checkbox defaultChecked>
        <CheckboxIndicator>
          <CheckIcon />
        </CheckboxIndicator>
      </Checkbox>
      <span className="fs-sm">Remember me</span>
    </div>
  );
}

Custom styling

Apply custom styles to the <Checkbox> component.

import { Checkbox } from "@yummacss/ui";

<Checkbox className="...">...</Checkbox>;

Extend properties

Extend the <Checkbox> component with the Base UI API.

import { Checkbox } from "@yummacss/ui";

<Checkbox {...props}>...</Checkbox>;