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>
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>
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>
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>
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>
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>
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>
Add a description to the checkbox group to give users
additional information about the grouped options.
<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>
This component supports named slots, which allow custom
styles to be applied to specific parts of the component:
Base: 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:
Checkbox Group
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.
See the API references below for a complete guide to all the
parameters available for the components mentioned here.
© 2025 LumexUI. All rights reserved.