Checkbox
A checkbox component that supports custom icons, labels, and various states. It can be used as a controlled or uncontrolled component.
Props
| Name | Default | Type |
|---|---|---|
label | — | string Text label for the checkbox |
disabled | false | boolean Disables the checkbox |
checked | — | boolean Controls the checked state (for controlled usage) |
accent | false | boolean Uses accent color for the checkbox |
Events
| Name | Payload | Description |
|---|---|---|
change | boolean | Emitted when the checkbox state changes |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | Content to be displayed as the label (overrides the label prop if provided) |
icon-on | 'ph:check-square-fill' | Slot which renders when the component is checked |
icon-off | 'ph:square' | Slot which renders when the component is not checked |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-checkbox-size | 24px | Checkbox width and height |