Components

Checkbox

The checkbox allows users to select or deselect options, typically in forms or lists.
Source Styles source

Usage

The checkbox component can be used to turn an option on or off.

<LumexCheckbox Value="@true">Option</LumexCheckbox>

Disabled

You can disable a checkbox to prevent user interaction. A disabled checkbox is faded and does not respond to user clicks. 

<LumexCheckbox Disabled="@true">Option</LumexCheckbox>
<LumexCheckbox Disabled="@true" Value="@true">Option</LumexCheckbox>

Read-Only

You can set a checkbox to be read-only, allowing users to view the selected option without being able to modify it. 

<LumexCheckbox ReadOnly="@true">Option</LumexCheckbox>
<LumexCheckbox ReadOnly="@true" Value="@true">Option</LumexCheckbox>

Sizes

The checkbox component supports different sizes to fit various layouts and design needs, from small checkboxes to larger ones. 

<LumexCheckbox Size="@Size.Small" Value="@true">Small</LumexCheckbox>
<LumexCheckbox Size="@Size.Medium" Value="@true">Medium</LumexCheckbox>
<LumexCheckbox Size="@Size.Large" Value="@true">Large</LumexCheckbox>

Radius

The checkbox component supports various border radius options, allowing you to create checkboxes with rounded corners or sharp edges. 

<LumexCheckbox Radius="@Radius.None" Value="@true">None</LumexCheckbox>
<LumexCheckbox Radius="@Radius.Small" Value="@true">Small</LumexCheckbox>
<LumexCheckbox Radius="@Radius.Medium" Value="@true">Medium</LumexCheckbox>
<LumexCheckbox Radius="@Radius.Large" Value="@true">Large</LumexCheckbox>

Colors

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

<LumexCheckbox Color="@ThemeColor.Default" Value="@true">Default</LumexCheckbox>
<LumexCheckbox Color="@ThemeColor.Primary" Value="@true">Primary</LumexCheckbox>
<LumexCheckbox Color="@ThemeColor.Secondary" Value="@true">Secondary</LumexCheckbox>
<LumexCheckbox Color="@ThemeColor.Success" Value="@true">Success</LumexCheckbox>
<LumexCheckbox Color="@ThemeColor.Warning" Value="@true">Warning</LumexCheckbox>
<LumexCheckbox Color="@ThemeColor.Danger" Value="@true">Danger</LumexCheckbox>
<LumexCheckbox Color="@ThemeColor.Info" Value="@true">Info</LumexCheckbox>

Custom Check Icon

You can replace the default check icon with a custom one.

@using LumexUI.Shared.Icons

<LumexCheckbox Value="@true">
    <IconContent>
        <HeartFilledIcon />
    </IconContent>
    <ChildContent>Option</ChildContent>
</LumexCheckbox>

Two-way Data Binding

The checkbox component supports two-way data binding, allowing you to programmatically control checked state. You can achieve this using the @bind-Value directive, or the Value and ValueChanged parameters.

Selected: False

Selected: True

<div class="flex flex-col gap-2">
    <LumexCheckbox @bind-Value="@_valueOne">Option</LumexCheckbox>
    <p class="text-sm text-default-500">
        Selected: @_valueOne
    </p>
</div>

<div class="flex flex-col gap-2">
    <LumexCheckbox Value="@_valueTwo"
                   ValueChanged="@OnValueChanged">
        Option
    </LumexCheckbox>
    <p class="text-sm text-default-500">
        Selected: @_valueTwo
    </p>
</div>

@code {
    private bool _valueOne;
    private bool _valueTwo = true;

    private void OnValueChanged( bool @checked )
    {
        _valueTwo = @checked;
    }
}

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.
  • Wrapper: The wrappper of the input and icon elements that manages states.
  • Icon: The icon within the checkbox that appears when the checkbox is selected.
  • Label: The label associated with the checkbox.

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

Checkbox

  • Class: The basic CSS class name styles the wrapper of the checkbox.
  • Classes: The CSS class names for the checkbox slots style the entire checkbox at once.
@using LumexUI.Shared.Icons

<LumexCheckbox Value="@true" Classes="@_classes">
    <div class="flex items-center gap-4">
        <ShieldPlusIcon Size="32" />
        <div>
            <div class="font-medium">Mobile Anti-Virus</div>
            <div class="flex items-center gap-1.5 text-sm text-primary">
                <span>$5,07</span>
                <span>/ month</span>
            </div>
        </div>
    </div>
</LumexCheckbox>

@code {
    private CheckboxSlots _classes = new()
    {
        Base = ElementClass.Empty()
            .Add( "w-full max-w-md gap-2 p-4" )
            .Add( "rounded-lg border-2 border-default-100 " )
            .Add( "bg-surface1 hover:bg-surface2" )
            .Add( "data-[checked=true]:border-primary" )
            .ToString(),
        Label = "w-full"
    };
}

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 🗙