<BitRating />

<BitRating IsEnabled="false" DefaultValue="2" />

<BitRating ReadOnly DefaultValue="3.5" />

Visible: [ <BitRating Visibility=""BitVisibility.Visible"" /> ]
Hidden: [ <BitRating Visibility=""BitVisibility.Hidden"" /> ]
Collapsed: [ <BitRating Visibility=""BitVisibility.Collapsed"" /> ]

<style>
    .custom-class {
        margin-inline: 1rem;
        border-radius: 0.25rem;
        padding-inline: 0.5rem;
        border: 1px solid dodgerblue;
        box-shadow: dodgerblue 0 0 1rem;
    }

    .custom-selected {
        color: seagreen;
    }

    .custom-unselected {
        color: mediumseagreen;
    }

    .custom-unselected:hover {
        color: lightseagreen;
    }
</style>


<BitRating Style="padding-inline: 0.5rem; margin-inline: 1rem; box-shadow: tomato 0 0 1rem; border-radius: 1rem;" />

<BitRating Class="custom-class" />


<BitRating Styles="@(new() { SelectedIcon = "color: blueviolet;", UnselectedIcon = "color: blueviolet;" })" />

<BitRating Classes="@(new() { SelectedIcon = "custom-selected", UnselectedIcon = "custom-unselected" })" />

<BitRating Max="6" />

<div style="width: 200px;">
    <BitRating Max="100" />
</div>

<BitRating SelectedIconName="@BitIconName.HeartFill" UnselectedIconName="@BitIconName.Heart" />

<BitRating SelectedIconName="@BitIconName.CheckboxCompositeReversed" UnselectedIconName="@BitIconName.Checkbox" />

<BitRating SelectedIconName="@BitIconName.LikeSolid" UnselectedIconName="@BitIconName.Dislike" />

<BitRating Size="BitSize.Small" />

<BitRating Size="BitSize.Medium" />

<BitRating Size="BitSize.Large" />

<BitRating AllowZeroStars="true" Value="oneWayBinding" />
<BitToggleButton OnChange="v => oneWayBinding = v ? 5 : 0" Text="@(oneWayBinding == 5 ? "Unstar All" : "Star All")" />

<BitRating @bind-Value="twoWayBinding" />
<BitNumberField @bind-Value="twoWayBinding" />

<BitRating DefaultValue="2" OnChange="v => onChangeValue = v" />
<BitLabel>Changed Value: @onChangeValue</BitLabel>
@code {
    private double oneWayBinding = 0;
    private double twoWayBinding = 3;
    private double onChangeValue;
}
                    

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="ValidationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">

    <DataAnnotationsValidator />

    <BitRating AllowZeroStars="true" @bind-Value="ValidationModel.Value" />
    <ValidationMessage For="@(() => ValidationModel.Value)" />

    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class BitRatingDemoFormModel
    {
        [Range(typeof(double), "1", "5", ErrorMessage = "Your rate must be between {1} and {2}")]
        public double Value { get; set; }
    }
    
    public BitRatingDemoFormModel ValidationModel = new();
    
    private void HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
}
                    

<BitRating Dir="BitDir.Rtl" />