InputsPage.razor

@namespace RPedretti.RazorComponents.Sample.Shared.Pages.Inputs
@using RPedretti.RazorComponents.Input.Checkbox
@using RPedretti.RazorComponents.Input.Radio
@using RPedretti.RazorComponents.Input.ToggleSwitch
@using RPedretti.RazorComponents.Input.SuggestBox
@using RPedretti.RazorComponents.Layout.Accordeon
@using RPedretti.RazorComponents.Shared.Components;
@page "/"
@inherits BaseComponent

<div class="inputs-page">
    <div class="accordeon-container suggest-box-container">
        <Accordeon Title="Suggestbox" CenterTitle>
            <p>Selected suggestion: @(string.IsNullOrEmpty(SelectedSuggestion) ? "Not selected" : SelectedSuggestion)</p>
            <SuggestBox Suggestions="FilteredList"
                        TItem="string"
                        Query="@Query"
                        LoadingSuggestion="@LoadingSuggestions"
                        SuggestionSelected="SuggestionSelected"
                        QueryChanged="FetchSuggestions">
                <SuggestionTemplate>
                    @{var color = context.Selected ? "red" : ""; }
                    <p class="sb-suggestion" style="color: @color;">@context.Value</p>
                </SuggestionTemplate>
            </SuggestBox>
        </Accordeon>
    </div>

    <div class="accordeon-container">
        <Accordeon Title="Checkbox" CenterTitle>

            <fieldset>
                <legend>Dependent Inverse</legend>
                <Checkbox A11yLabel="Olar First" Label="Olar 1" @bind-Checked="SomeChecked" />
                <Checkbox A11yLabel="Olar Second" Label="Olar 2" Checked="@(!SomeChecked)" CheckedChanged="@(v => SomeChecked = !v)" Size="CheckboxSize.MEDIUM" />
            </fieldset>
            <fieldset>
                <legend>Dependent</legend>
                <Checkbox Label="Olar 3" @bind-Checked="SomeChecked2" Size="CheckboxSize.LARGE" />
                <Checkbox Label="Olar 4" @bind-Checked="SomeChecked2" Size="CheckboxSize.EXTRA_LARGE" />
            </fieldset>
            <fieldset>
                <legend>Inline</legend>
                <Checkbox Label="Olar inline 1" Inline />
                <Checkbox Label="Olar inline 2" Inline Size="CheckboxSize.EXTRA_LARGE" Disabled />
            </fieldset>
        </Accordeon>
    </div>

    <div class="accordeon-container">
        <Accordeon Title="Switches" CenterTitle>
            <fieldset>
                <legend>Sizes</legend>
                <ToggleSwitch Round Size="SwitchSize.SMALL" Label="Small" />
                <ToggleSwitch Size="SwitchSize.SMALL" Label="Small" />
                <ToggleSwitch Round Size="SwitchSize.MEDIUM" Label="Medium" />
                <ToggleSwitch Size="SwitchSize.MEDIUM" Label="Medium" />
                <ToggleSwitch Round Size="SwitchSize.LARGE" Label="Large" />
                <ToggleSwitch Size="SwitchSize.LARGE" Label="Large" />
            </fieldset>
            <fieldset>
                <legend>Dependent Inverse</legend>
                <ToggleSwitch Label="Square" @bind-Checked="SomeToggled" />
                <ToggleSwitch Label="Round" Round Checked="@(!SomeToggled)" CheckedChanged="@(v => SomeToggled = !v)" />
            </fieldset>
            <fieldset>
                <legend>Dependent</legend>
                <ToggleSwitch Label="Square Fill" Fill @bind-Checked="SomeToggled2" />
                <ToggleSwitch Label="Round Fill" Round Fill @bind-Checked="SomeToggled2" />
            </fieldset>
            <fieldset>
                <legend>Inline</legend>
                <ToggleSwitch Label="Inline 1" Inline />
                <ToggleSwitch Label="Inline 2" Inline Round />
            </fieldset>
            <fieldset>
                <legend>States</legend>
                <ToggleSwitch Label="Disabled not checked" Disabled />
                <ToggleSwitch Label="Disabled checked" Disabled Checked />
            </fieldset>
        </Accordeon>
    </div>

    <div class="accordeon-container">
        <Accordeon Title="Radio Button" CenterTitle>
            <button class="btn my-button" @onclick="@ResetSelectedRadios" disabled="@(!HasSelection)">Reset All</button>

            <fieldset>
                <legend>Vertical</legend>
                <RadioGroup Buttons="@RadioButtons" @bind-Selected="@SelectedRadioButton1" />
            </fieldset>
            <fieldset>
                <legend>Horizontal</legend>
                <RadioGroup Buttons="@RadioButtons" Orientation="@RadioOrientation.HORIZONTAL" @bind-Selected="@SelectedRadioButton2" />
            </fieldset>
            <fieldset>
                <legend>Can deselect</legend>
                <RadioGroup Buttons="@RadioButtons" CanDeselect @bind-Selected="@SelectedRadioButton3" />
            </fieldset>
        </Accordeon>
    </div>
</div>