Products · Components
Checkbox
A box the person ticks to agree or to choose an option.
For a setting that applies at once, use a Switch.
Children: Nothing
Example
<Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />export default definePage({
initialState: { agreed: false },
mutations: {
setAgreed: (_state, event: CheckedEvent) => ({ agreed: event.detail.checked }),
},
});Props
| Prop | Type | What it is |
|---|---|---|
checked | boolean | Default: false. |
label | string | |
disabled | boolean | Dims it, and the person can't use it. |
Events
| Event | Sends | Notes |
|---|---|---|
onChange | { checked } in detail |
Keep reading
RadioGroupA set of options where the person picks one.RadioOne option in a RadioGroup, with its value and the label people see.ListA list of rows in a card, which can load more rows as the person scrolls.ListItemOne row in a List: a title, a subtitle, an icon or picture, and a value or badge at the end.