gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/checkbox.md

• Home
• Components
• Checkbox

Checkbox

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

Props

Prop Type Default Description checkall boolean false Renders a square fill style for "select all" semantics ...Radix props ComponentProps - All Radix checkbox props

Types

interface CheckboxProps extends ComponentProps<typeof CheckboxPrimitive.Root> {
  checkall?: boolean;
  className?: string;
}

Usage

<div className="flex flex-col gap-6">
  <div className="flex items-center gap-3">
    <Checkbox id="Checkbox" />
    <label htmlFor="Checkbox">Checkbox</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Checkbox disabled" disabled />
    <label htmlFor="Checkbox disabled">Checkbox disabled</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Checkbox disabled checked" disabled defaultChecked />
    <label htmlFor="Checkbox disabled checked">Checkbox disabled checked</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="checkall" checkall />
    <label htmlFor="checkall">Check all</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Check all disabled" checkall disabled />
    <label htmlFor="Check all disabled">Check all disabled</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Check all disabled checked" defaultChecked disabled checkall />
    <label htmlFor="Check all disabled checked">Check all disabled checked</label>
  </div>
</div>

Examples

<Checkbox id="opt-in" />
<Checkbox id="select-all" checkall />