Components

Checkbox Group

The checkbox group allows users to select or deselect options from a set.
Source Styles source

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.

Choose the Oscar nominee
<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 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.

API

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

An unhandled error has occurred. Reload 🗙