## 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 Medium Small ; ``` ### 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 Default Checked Indeterminate Disabled ; ``` ### 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 1 Option 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', initialState: true, }, { id: 'womensClothing', label: "Women's clothing", initialState: true, }, { id: 'mensClothing', label: "Men's clothing", initialState: false, }, { id: 'kids', label: 'Kids', initialState: false, }, { id: 'home', label: 'Home', initialState: 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 => { const [checked, setChecked] = React.useState(item.initialState); return ( setChecked(!checked)} > {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', initialState: true, }, { id: 'roles', label: 'Roles', description: 'Users who are assigned to a special role', initialState: false, }, { id: 'badges', label: 'Badges', description: 'Users who have selected badges', initialState: false, }, ]; const getCheckboxLabel = item => ( {item.label} {item.description} ); const renderCheckboxes = () => { return checkboxes.map(item => { const [checked, setChecked] = React.useState(item.initialState); 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
    Categories Title Ratings Tags Writers Counters
    Categories Writer Publish date Reading time Last updated
    Likes Views Comments
    ; ```