Components

Switch

Switches allow to toggle between two states, typically used for enabling or disabling settings.
Source Styles source

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. 

@using LumexUI.Shared.Icons

<LumexSwitch Color="@ThemeColor.Danger"
             Size="@Size.Large"
             Value="@true">
    <StartContent>
        <SunIcon />
    </StartContent>
    <ChildContent>
        Dark Mode
    </ChildContent>
    <EndContent>
        <MoonIcon />
    </EndContent>
</LumexSwitch>

Custom Thumb Icon

Add an icon indicator to the thumb for on/off states, providing a clear visual cue for each position. 

@using LumexUI.Shared.Icons

<LumexSwitch Size="@Size.Large" Value="@true">
    <ThumbContent Context="toggled">
        @(toggled ? @<Volume2Icon /> : @<VolumeOffIcon />)
    </ThumbContent>
    <ChildContent>Volume</ChildContent>
</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 supports named slots, which allow custom styles to be applied to specific parts of the component:

  • Base: 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()
    {
        Base = 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 border-default-200 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.

An unhandled error has occurred. Reload đź—™