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.
<LumexCheckbox CheckIcon="@Icons.Rounded.Favorite" Value="@true">Option</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 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.
- 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.
<LumexCheckbox Value="@true" Classes="@_classes">
<div class="flex items-center gap-4">
<LumexIcon Icon="@Icons.Rounded.HealthAndSafety"
Size="@new("32")" />
<div>
<div class="font-medium">Mobile Anti-Virus</div>
<p class="text-sm text-primary">5,07 €/month</p>
</div>
</div>
</LumexCheckbox>
@code {
private CheckboxSlots _classes = new()
{
Root = 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.