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>