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

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

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase checkbox lists with two-way data binding, configurable orientation and layout (vertical/horizontal with alignment options), data-bound items, statically declared items, select-all functionality, disabled/read-only individual items, and custom templates.
</RadzenText>

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

<RadzenText Anchor="checkboxlist#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of CheckBoxList using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListChangeEvent">
    <CheckBoxListChangeEvent />
</RadzenExample>

<RadzenText Anchor="checkboxlist#orientation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Set CheckBoxList orientation and layout
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    CheckBoxList layout can be configured via various properties for position and alignment such as <code>Orientation</code>, <code>AlignItems</code>, and <code>JustifyContent</code>. The behavior is similar to <RadzenLink Text="RadzenStack" Path="/stack" />.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListOrientation">
    <CheckBoxListOrientation />
</RadzenExample>

<RadzenText Anchor="checkboxlist#populate-items" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate CheckBoxList items from data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Data</code> property to dynamically populate CheckBoxList items from a collection.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListItemsFromData">
    <CheckBoxListItemsFromData />
</RadzenExample>

<RadzenText Anchor="checkboxlist#statically-declared" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Statically declared and populated CheckBoxList items from data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Combine statically declared items with data-bound items for flexible CheckBoxList configurations.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListDeclaredAndItemsFromData">
    <CheckBoxListDeclaredAndItemsFromData />
</RadzenExample>

<RadzenText Anchor="checkboxlist#select-all-items" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Select all CheckBoxList items
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Implement select all functionality to quickly check or uncheck all items in the CheckBoxList.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListSelectAll">
    <CheckBoxListSelectAll />
</RadzenExample>

<RadzenText Anchor="checkboxlist#disabled-item" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Disabled CheckBoxList item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Disable specific CheckBoxList items to prevent user interaction with those items.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListDisabledItem">
    <CheckBoxListDisabledItem />
</RadzenExample>

<RadzenText Anchor="checkboxlist#readonly-item" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    ReadOnly CheckBoxList item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Make specific CheckBoxList items read-only to prevent changes while keeping them interactive.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListReadOnlyItem">
    <CheckBoxListReadOnlyItem />
</RadzenExample>

<RadzenText Anchor="checkboxlist#templated-item" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Templated CheckBoxList item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Template</code> property to customize the appearance of CheckBoxList items.
</RadzenText>
<RadzenExample ComponentName="CheckBoxList" Example="CheckBoxListTemplateItem">
    <CheckBoxListTemplateItem />
</RadzenExample>

<RadzenText Anchor="checkboxlist#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 CheckBoxList component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a CheckBoxList item." },
        new KeyboardShortcut { Key = "Shift + Tab", Action = "Navigate to previous CheckBoxList item." },
        new KeyboardShortcut { Key = "Space", Action = "Change the state of a focused CheckBoxList item switching between checked and not checked." }
    };
}
