## Feature Examples
### Size
- description: Adjust the component size using the `size` prop. It supports 2 sizes: - `medium` (default) - use in all common cases - `small` - use in more dense layouts
- example:
```jsx
MediumSmall;
```
### State
- description: A checkbox can exist in multiple states: - In the `default` state, the checkbox is empty and the user is able to select it. - `checked` - the selected item is marked. - `indeterminate` - represent a mixed value for bulk selection checkbox (both selected and not selected values included). - `disabled` - highlight that a selection exists but it's not available at that time.
- example:
```jsx
DefaultCheckedIndeterminateDisabled;
```
### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Show the status message inline, directly below the checkboxes by wrapping them in a `` and adding `statusMessage`. View more inline status message examples in ``.
- example:
```jsx
Option 1Option 2;
```
### Vertical alignment
- description: Control checkbox alignment with a label using the `vAlign` prop. It supports 2 values: - `center` (default) - use it in all common cases - `top` - use it to align the checkbox to the top to handle text overflow
- example:
```jsx
Checkbox label that wraps to multiple lines (center)
Checkbox label that wraps to multiple lines (top)
;
```
### Selection area
- description: Emphasize the clickable space with a selection area. Control the style with: - `selectionArea` - to specify whether to display an area on hover, always or not display it at all - `selectionAreaSkin` - to specify which design to use: filled or outline - `selectionAreaPadding` - to define white space around the checkbox in pixels
- example:
```jsx
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
;
```
### Max lines
- description: Use `maxLines` prop to limit the amount of lines and show ellipsis.
- example:
```jsx
Checkbox label that wraps to multiple lines
Checkbox label that has max lines applied
;
```
### Tooltip
- description: Use a tooltip to give added explanation for the checkbox. Use the `tooltipContent` prop, and control the design with `tooltipProps` (it accepts all standard `` properties).
- example:
```jsx
Hover the mouse on a checkbox to see a tooltip
;
```
## Common Use Case Examples
### Forms
- description: Use checkboxes in a form to display all available options.
- example:
```jsx
() => {
const checkboxes = [
{
id: 'newArrivals',
label: 'New Arrivals',
isChecked: true,
},
{
id: 'womensClothing',
label: "Women's clothing",
isChecked: true,
},
{
id: 'mensClothing',
label: "Men's clothing",
isChecked: false,
},
{
id: 'kids',
label: 'Kids',
isChecked: false,
},
{
id: 'home',
label: 'Home',
isChecked: false,
},
];
const [checkboxesList, setCheckboxesList] = React.useState(checkboxes);
const isAllSelected = !checkboxesList
.map((item) => item.isChecked)
.includes(false);
const isAllDeselected = !checkboxesList
.map((item) => item.isChecked)
.includes(true);
const toggleCheckedAll = (checked) => {
setCheckboxesList(
checkboxesList.map((item) => ({ ...item, isChecked: checked })),
);
};
const renderCheckboxes = () =>
checkboxesList.map((item) => (
setCheckboxesList(
checkboxesList.map((other) =>
other.id === item.id
? { ...other, isChecked: !other.isChecked }
: other,
),
)
}
>
{item.label}
));
return (
{
isAllSelected
? toggleCheckedAll(false)
: toggleCheckedAll(true);
}}
disabled={!isAllSelected && !isAllDeselected}
>
All products
{renderCheckboxes()}
}>
Create Collection
);
};
```
### With a label
- description: Use any component for checkbox labels, make sure that they are either textual components or self-explanatory within the given context.
- example:
```jsx
() => {
const checkboxes = [
{
id: 'members',
label: 'Members',
description: 'All registered users',
isChecked: true,
},
{
id: 'roles',
label: 'Roles',
description: 'Users who are assigned to a special role',
isChecked: false,
},
{
id: 'badges',
label: 'Badges',
description: 'Users who have selected badges',
isChecked: false,
},
];
const getCheckboxLabel = (item) => (
{item.label}
{item.description}
);
const renderCheckboxes = () => {
return checkboxes.map((item) => {
const [checked, setChecked] = React.useState(item.isChecked);
return (
setChecked(!checked)}
selectionArea="hover"
id={item.id}
>
{getCheckboxLabel(item)}
);
});
};
return (
{renderCheckboxes()}
);
};
```
### Manage panel
- description: Use checkboxes to manage which elements of an app are visible on your site.
- example:
```jsx
{}}
skin="floating"
width="288px"
height="576px"
>
Choose which elements to display on Post Header
;
```