Forms

TwRating

TwRating is a Blazor star rating component. Bind Value, set Min and Max, rate in whole or half steps and swap in any icon.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Bind Value with @bind-Value. The rating is a group of native radio inputs, so it is one Tab stop and the arrow keys change the value.

How was your stay?

You rated it 4 out of 5.

RAZOR

<TwRating Label="How was your stay?" @bind-Value="stayRating" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">You rated it <strong>@stayRating</strong> out of 5.</p>

CSHARP

@code {
    private double stayRating = 4;
}

Whole and half steps

The type of T sets the precision: an integer rates in whole icons, while double, decimal or float rate in half icons. Hover over the first half of an icon to pick the half.

RAZOR

<div class="space-y-6">
    <div>
        <TwRating T="int" Label="Whole stars (int)" @bind-Value="wholeRating" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@wholeRating</strong></p>
    </div>
    <div>
        <TwRating T="decimal" Label="Half stars (decimal)" @bind-Value="halfRating" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@halfRating</strong></p>
    </div>
</div>

CSHARP

@code {
    private int wholeRating = 3;
    private decimal halfRating = 3.5m;
}

Rounding

A value between steps is displayed rounded to the nearest half, or whole, icon. Set Rounding to change how: AwayFromZero (the default) rounds to the nearest, ToNegativeInfinity always rounds down and ToPositiveInfinity always rounds up. The bound value is never rewritten.

3.7 rounded to the nearest

3.7 rounded down

3.7 rounded up

RAZOR

<div class="space-y-4">
    <TwRating Label="3.7 rounded to the nearest" Value="_averageRating" ReadOnly />
    <TwRating Label="3.7 rounded down" Value="_averageRating" Rounding="MidpointRounding.ToNegativeInfinity" ReadOnly />
    <TwRating Label="3.7 rounded up" Value="_averageRating" Rounding="MidpointRounding.ToPositiveInfinity" ReadOnly />
</div>

CSHARP

@code {
    private readonly double _averageRating = 3.7;
}

Icons and colors

Any Icon works: a half step clips the filled icon to half its width. Set EmptyIcon to an outline icon to give unfilled steps a different shape as well as a different color, and Color to change the fill.

RAZOR

<div class="space-y-4">
    <TwRating Label="Hearts" Icon="Icon.Heart_Fill" EmptyIcon="Icon.Heart" Color="Color.Danger" @bind-Value="heartRating" />
    <TwRating Label="Outlined stars" Icon="Icon.Star_Fill" EmptyIcon="Icon.Star" @bind-Value="outlinedRating" />
    <TwRating T="int" Label="Spice level" Icon="Icon.Fire" Color="Color.Danger" Max="3" @bind-Value="spiceLevel" />
    <TwRating Label="Energy" Icon="Icon.Lightning_Fill" Color="Color.Primary" @bind-Value="energyRating" />
</div>

CSHARP

@code {
    private double heartRating = 3.5;
    private double outlinedRating = 2.5;
    private int spiceLevel = 2;
    private double energyRating = 4;
}

Sizes

Use Size to pick small, medium (the default) or large icons.

RAZOR

<div class="space-y-4">
    <TwRating Label="Small" Size="Size.Sm" @bind-Value="sizeRating" />
    <TwRating Label="Medium" Size="Size.Md" @bind-Value="sizeRating" />
    <TwRating Label="Large" Size="Size.Lg" @bind-Value="sizeRating" />
</div>

CSHARP

@code {
    private double sizeRating = 3.5;
}

Min & max

Max sets the number of icons. Min is the lowest value that can be picked: while it is 0 the rating can be cleared by clicking the selected icon again, or by choosing No rating from the keyboard.

RAZOR

<div class="space-y-6">
    <div>
        <TwRating T="int" Label="Out of 10" Max="10" Size="Size.Sm" @bind-Value="tenRating" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@tenRating</strong> / 10</p>
    </div>
    <div>
        <TwRating T="int" Label="At least one star" Min="1" @bind-Value="requiredRating" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@requiredRating</strong></p>
    </div>
</div>

CSHARP

@code {
    private int tenRating = 7;
    private int requiredRating = 1;
}

Animation

Hovering grows an icon slightly and picking a value makes the newly filled icons pop. Set DisableAnimation to turn both off. They are always off for anyone whose system asks for reduced motion.

RAZOR

<div class="space-y-4">
    <TwRating Label="Animated" @bind-Value="animatedRating" />
    <TwRating Label="No animation" DisableAnimation @bind-Value="animatedRating" />
</div>

CSHARP

@code {
    private double animatedRating = 3;
}

Disabled & readonly

Disabled dims the rating and locks it. ReadOnly keeps its colors and is announced as a single image, such as "Rated 4.5 out of 5", which suits showing a review score.

RAZOR

<div class="space-y-4">
    <TwRating Label="Disabled" Value="2.5" Disabled />
    <TwRating Label="Readonly" Value="4.5" ReadOnly />
</div>

CSHARP

@code {
    // CodeExample 'RatingDisabledReadonlyCode' not found
}

Validation

Set Invalid and ErrorMessage to show an error. The message is tied to the group with aria-describedby, so screen readers read it with the rating.

Rate your order

Please pick a rating.

RAZOR

<TwRating T="int" Label="Rate your order" @bind-Value="orderRating" Invalid="@(orderRating == 0)" ErrorMessage="Please pick a rating." />

CSHARP

@code {
    private int orderRating;
}

A rating is a group of native radio inputs, one for each value, and is a single Tab stop. A read-only rating is not a Tab stop: screen readers announce it as an image named after its value.

Key	What it does
`Tab`	Moves focus into the rating, onto the selected value.
`Arrow Right` or `Arrow Up`	Selects the next value, half an icon or a whole icon at a time.
`Arrow Left` or `Arrow Down`	Selects the previous value. Going below the first value selects No rating, when the rating can be cleared.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwRatingTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`EmptyFocusRing`	string
`Item`	string
`ItemFocusRing`	string
`ItemHover`	string
`Visual`	string
`Empty`	string
`Clip`	string
`Filled`	string
`Pop`	string
`Input`	string
`HalfTarget`	string
`FullTarget`	string
`Disabled`	string
`Small`	string
`Medium`	string
`Large`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwRatingTheme on the API docs.

TwRating

Basic usage

Whole and half steps

Rounding

Icons and colors

Sizes

Min & max

Animation

Disabled & readonly

Validation

Keyboard navigation

Theme configuration

Global Theme Configuration