Usage
The switch component can be used to toggle the state of a single setting on or off.
<LumexSwitch Value="@true">Auto Updates</LumexSwitch>
Disabled
You can disable a switch to prevent user interaction. A disabled switch is faded and does not respond to user clicks.
<LumexSwitch Disabled="@true">Auto Updates</LumexSwitch>
<LumexSwitch Disabled="@true" Value="@true">Auto Updates</LumexSwitch>
Read-Only
Set the switch component to read-only to display the current state without allowing changes.
<LumexSwitch ReadOnly="@true">Auto Updates</LumexSwitch>
<LumexSwitch ReadOnly="@true" Value="@true">Auto Updates</LumexSwitch>
Sizes
The switch component supports multiple sizes to fit different layouts and design needs.
<LumexSwitch Size="@Size.Small" Value="@true">Small</LumexSwitch>
<LumexSwitch Size="@Size.Medium" Value="@true">Medium</LumexSwitch>
<LumexSwitch Size="@Size.Large" Value="@true">Large</LumexSwitch>
Colors
Customize the color of the switch to align with your application’s theme, providing clear visual feedback.
<LumexSwitch Color="@ThemeColor.Default" Value="@true">Default</LumexSwitch>
<LumexSwitch Color="@ThemeColor.Primary" Value="@true">Primary</LumexSwitch>
<LumexSwitch Color="@ThemeColor.Secondary" Value="@true">Secondary</LumexSwitch>
<LumexSwitch Color="@ThemeColor.Success" Value="@true">Success</LumexSwitch>
<LumexSwitch Color="@ThemeColor.Warning" Value="@true">Warning</LumexSwitch>
<LumexSwitch Color="@ThemeColor.Danger" Value="@true">Danger</LumexSwitch>
<LumexSwitch Color="@ThemeColor.Info" Value="@true">Info</LumexSwitch>
Icons
Add icons to the switch to represent each state, such as an on/off indicator, for additional clarity.
<LumexSwitch StartIcon="@Icons.Rounded.LightMode"
EndIcon="@Icons.Rounded.DarkMode"
Color="@ThemeColor.Danger"
Size="@Size.Large"
Value="@true">
Dark Mode
</LumexSwitch>
Custom Thumb Icon
Add an icon indicator to the thumb for on/off states, providing a clear visual cue for each position.
<LumexSwitch ThumbIcon="@((toggled) => toggled ? Icons.Rounded.VolumeUp : Icons.Rounded.VolumeOff)"
Size="@Size.Large"
Value="@true">
Sound
</LumexSwitch>
Two-way Data Binding
The switch component supports two-way data binding,
allowing you to programmatically control toggled 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">
<LumexSwitch @bind-Value="@_valueOne">Auto Updates</LumexSwitch>
<p class="text-sm text-default-500">
Selected: @_valueOne
</p>
</div>
<div class="flex flex-col gap-2">
<LumexSwitch Value="@_valueTwo"
ValueChanged="@OnValueChanged">
Auto Updates
</LumexSwitch>
<p class="text-sm text-default-500">
Selected: @_valueTwo
</p>
</div>
@code {
private bool _valueOne;
private bool _valueTwo = true;
private void OnValueChanged( bool toggled )
{
_valueTwo = toggled;
}
}
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 wrapper of the switch.
- Wrapper: The wrapper of the start icon, thumb and end icon.
- Thumb: The movable part of the switch that toggles between the on and off states.
- Label: The text label associated with the switch.
- StartIcon: The icon displayed on the left side of the switch, indicating the off state.
- EndIcon: The icon displayed on the right side of the switch, indicating the on state.
- ThumbIcon: An optional icon within the thumb that reflects the current state.
You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:
Switch
Class: The CSS class name that styles the wrapper of the switch.Classes: The CSS class names for the switch slots that style entire switch.
<LumexSwitch Classes="@_classes">
<div class="flex flex-col gap-1">
<p class="font-medium">Enable early access</p>
<p class="text-tiny text-default-500">
Get access to new features before they are released.
</p>
</div>
</LumexSwitch>
@code {
private SwitchSlots _classes = new()
{
Root = ElementClass.Empty()
.Add( "flex-row-reverse w-full max-w-md gap-2 p-4 justify-between" )
.Add( "rounded-lg border-2 border-default-100" )
.Add( "bg-surface1 hover:bg-surface2" )
.Add( "data-[checked=true]:border-primary" )
.ToString(),
Wrapper = "p-0 h-4 overflow-visible",
Thumb = ElementClass.Empty()
.Add( "w-6 h-6 border-2 shadow-lg" )
.Add( "group-hover:border-primary" )
// toggled
.Add( "group-data-[checked=true]:ml-6" )
// active
.Add( "group-active:w-7" )
.Add( "group-data-[checked=true]:group-active:ml-4" )
.ToString(),
};
}
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.