63 lines
1.6 KiB
Markdown
63 lines
1.6 KiB
Markdown
- 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<typeof CheckboxPrimitive.Root> - 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 />
|
|
```
|
|
|