@page "/switch"
@page "/docs/guides/components/switch.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Switch
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Switch</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a toggle switch component with two-way data binding for on/off states, keyboard navigation support, and disabled state configuration.
</RadzenText>

<RadzenText Anchor="switch#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and set the value
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the Switch has a <code>Value</code> property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="Switch" Example="SwitchConfig">
    <SwitchConfig />
</RadzenExample>


<RadzenText Anchor="switch#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Switch component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Switch." },
        new KeyboardShortcut { Key = "Space or Enter", Action = "Toggle Switch." }
    };
}

<RadzenText Anchor="switch#disabled-switch" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Disabled Switch
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To disabled the switch, set <code>Disabled="true"</code>
</RadzenText>
<RadzenExample ComponentName="Switch" Example="SwitchDisabled">
    <SwitchDisabled />
</RadzenExample>
