Checkbox
<Checkbox label="I accept the terms and conditions" />
<CheckboxGroup
label="Export data"
theme="vertical"
onValueChanged={({ detail: { value } }) =>
Notification.show(`Current selection: ${value}`)
}
>
<Checkbox value="0" label="Order ID" />
<Checkbox value="1" label="Product name" />
<Checkbox value="2" label="Customer" />
<Checkbox value="3" label="Status" />
</CheckboxGroup>
States
Checkboxes have a couple of possible states. These states are described in the following subsections.
Disabled
Disable a field to mark it as unavailable currently. This is done by adding disabled
to the element, as shown in the example that follows.
Disabled state is used for fields that aren’t editable and don’t need to be readable. Disabled elements can’t be focused and may be inaccessible to assistive technologies like screen readers.
Disabling can be preferable to hiding an element to prevent the layout from changing when the element’s visibility changes, and to make users aware of its existence even when currently unavailable.
<Checkbox label="I accept the terms and conditions" disabled />
Note
|
Read-Only State
Checkbox doesn’t support read-only state.
|
Indeterminate
The indeterminate state can be used for a parent checkbox to show that there is a mix of checked and unchecked child items in a list, and to change the state of all children at once.
const users = ["Aria Bailey", "Aaliyah Butler", "Eleanor Price"];
const [selectedIds, setSelectedIds] = useState(["0", "2"]);
return (
<VerticalLayout theme="spacing">
<Checkbox
id="notifyUsers"
label="Notify Users"
checked={selectedIds.length === users.length}
indeterminate={
selectedIds.length > 0 && selectedIds.length < users.length
}
onCheckedChanged={({ detail: { value } }) =>
setSelectedIds(value ? users.map((_, index) => `${index}`) : [])
}
/>
<CheckboxGroup
label="Users to Notify"
theme="vertical"
value={selectedIds}
onValueChanged={({ detail: { value } }) => setSelectedIds(value)}
>
{users.map((value, index) => (
<Checkbox key={index} value={`${index}`} label={value} />
))}
</CheckboxGroup>
</VerticalLayout>
);
Orientation
The component’s default orientation is horizontal. However, vertical orientation is recommended whenever possible as it’s easier for the user to scan a vertical list of options.
Important
| You can find more information in the corresponding article on vaadin.com. |