Checkbox Group

Usage

The checkbox group component groups multiple checkboxes, displaying related choices in a consistent manner.

<LumexCheckboxGroup>
    <LumexCheckbox Value="@true">Leonardo DiCaprio</LumexCheckbox>
    <LumexCheckbox>Denzel Washington</LumexCheckbox>
    <LumexCheckbox>Brad Pitt</LumexCheckbox>
    <LumexCheckbox>Joaquin Phoenix</LumexCheckbox>
    <LumexCheckbox Value="@true">Christian Bale</LumexCheckbox>
</LumexCheckboxGroup>

Disabled

You can disable a checkbox group to prevent user interaction. All checkboxes within the group are faded and does not respond to user clicks.

<LumexCheckboxGroup Disabled="@true">
    <LumexCheckbox Value="@true">Leonardo DiCaprio</LumexCheckbox>
    <LumexCheckbox>Denzel Washington</LumexCheckbox>
    <LumexCheckbox>Brad Pitt</LumexCheckbox>
    <LumexCheckbox>Joaquin Phoenix</LumexCheckbox>
    <LumexCheckbox Value="@true">Christian Bale</LumexCheckbox>
</LumexCheckboxGroup>

Read-Only

You can set a checkbox group to be read-only, allowing the user to view the selected options without being able to modify them.

<LumexCheckboxGroup ReadOnly="@true">
    <LumexCheckbox Value="@true">Leonardo DiCaprio</LumexCheckbox>
    <LumexCheckbox>Denzel Washington</LumexCheckbox>
    <LumexCheckbox>Brad Pitt</LumexCheckbox>
    <LumexCheckbox>Joaquin Phoenix</LumexCheckbox>
    <LumexCheckbox Value="@true">Christian Bale</LumexCheckbox>
</LumexCheckboxGroup>

Sizes

The checkbox group component can control the size of the checkboxes within it to fit various layouts and design needs, from small checkbox groups to larger ones.

<LumexCheckboxGroup Size="@Size.Medium">
    <LumexCheckbox Size="@Size.Large" Value="@true">A</LumexCheckbox>
    <LumexCheckbox Value="@true">B</LumexCheckbox>
    <LumexCheckbox Value="@true">C</LumexCheckbox>
    <LumexCheckbox Value="@true">D</LumexCheckbox>
    <LumexCheckbox Value="@true">E</LumexCheckbox>
</LumexCheckboxGroup>

Radius

The checkbox group component can control the border radius of the checkboxes within it, allowing you to create checkboxes with rounded corners or sharp edges.

<LumexCheckboxGroup Radius="@Radius.Medium">
    <LumexCheckbox Radius="@Radius.None" Value="@true">A</LumexCheckbox>
    <LumexCheckbox Value="@true">B</LumexCheckbox>
    <LumexCheckbox Value="@true">C</LumexCheckbox>
    <LumexCheckbox Value="@true">D</LumexCheckbox>
    <LumexCheckbox Value="@true">E</LumexCheckbox>
</LumexCheckboxGroup>

Colors

Customize the appearance of the checkbox group by applying different colors that suit your application's theme and design.

<LumexCheckboxGroup Color="@ThemeColor.Primary">
    <LumexCheckbox Color="@ThemeColor.Secondary" Value="@true">A</LumexCheckbox>
    <LumexCheckbox Value="@true">B</LumexCheckbox>
    <LumexCheckbox Value="@true">C</LumexCheckbox>
    <LumexCheckbox Value="@true">D</LumexCheckbox>
    <LumexCheckbox Value="@true">E</LumexCheckbox>
    <LumexCheckbox Value="@true">F</LumexCheckbox>
    <LumexCheckbox Value="@true">G</LumexCheckbox>
</LumexCheckboxGroup>

Label

The checkbox group can include a label to provide context for the grouped checkboxes, making it clear what the set of options represents.

<LumexCheckboxGroup Label="Choose the Oscar nominee">
    <LumexCheckbox Value="@true">Leonardo DiCaprio</LumexCheckbox>
    <LumexCheckbox>Denzel Washington</LumexCheckbox>
    <LumexCheckbox>Brad Pitt</LumexCheckbox>
    <LumexCheckbox>Joaquin Phoenix</LumexCheckbox>
    <LumexCheckbox Value="@true">Christian Bale</LumexCheckbox>
</LumexCheckboxGroup>

Description

Add a description to the checkbox group to give users additional information about the grouped options.

Choose the Oscar nominee

Select the actors who deserve the Oscar

<LumexCheckboxGroup Label="Choose the Oscar nominee"
                    Description="Select the actors who deserve the Oscar">
    <LumexCheckbox Value="@true">Leonardo DiCaprio</LumexCheckbox>
    <LumexCheckbox>Denzel Washington</LumexCheckbox>
    <LumexCheckbox>Brad Pitt</LumexCheckbox>
    <LumexCheckbox>Joaquin Phoenix</LumexCheckbox>
    <LumexCheckbox Value="@true">Christian Bale</LumexCheckbox>
</LumexCheckboxGroup>

Custom Styles

This component suppots named slots (represented as data-* attributes) that allow you to apply custom CSS to specific parts of the component.

Root: The overall container of the checkbox group.
Wrapper: The wrapper for the checkboxes within the group.
Label: The label associated with the checkbox group.
Description: The description of the checkbox group.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The basic CSS class name styles the wrapper of the checkbox group.
Classes: The CSS class names for the checkbox group slots style the entire checkbox group at once.
CheckboxClasses: The CSS class names for the checkboxes slots all the checkboxes at once.

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Checkbox Group

On this page