Forms

Rating

A star rating input for collecting or displaying scores. Supports half steps, custom icons, a readonly display mode, and native form submission.

Playground

Experiment with different props in real-time.

Color

Size

Allow half

Readonly

Basic Usage

<script lang="ts">
  import { Rating } from 'sv5ui';

  let value = $state(3);
</script>

<Rating bind:value />

Half Steps

Enable allowHalf for 0.5 increments.

<script lang="ts">
  import { Rating } from 'sv5ui';

  let value = $state(2.5);
</script>

<Rating bind:value allowHalf />

Readonly

Display a score without allowing edits.

<!-- Display an existing score -->
<Rating value={4} readonly />
<Rating value={3.5} allowHalf readonly />

Custom Count

Use max to set how many icons render.

<!-- max sets the number of icons -->
<Rating value={7} max={10} />

Custom Icons

<Rating value={3} icon="lucide:heart" color="error" />
<Rating value={4} icon="lucide:thumbs-up" color="info" />
<Rating value={2} icon="lucide:flame" color="warning" />

Colors

<Rating value={4} color="primary" />
<Rating value={4} color="warning" />
<Rating value={4} color="success" />
<Rating value={4} color="error" />

Sizes

<Rating value={3} size="xs" />
<Rating value={3} size="sm" />
<Rating value={3} size="md" />
<Rating value={3} size="lg" />
<Rating value={3} size="xl" />

Form Field

Pass a name for native submission and wire validation through FormField.

Rate your experience

Please leave a rating

<script lang="ts">
  import { Rating, FormField } from 'sv5ui';

  let score = $state(0);
  const error = $derived(score === 0 ? 'Please leave a rating' : '');
</script>

<FormField label="Rate your experience" {error}>
  <Rating bind:value={score} name="rating" />
</FormField>

Controlled

React to the value to show a label.

Good

<script lang="ts">
  import { Rating } from 'sv5ui';

  const labels = ['Terrible', 'Bad', 'Okay', 'Good', 'Excellent'];
  let value = $state(4);
</script>

<Rating bind:value />
<p>{value ? labels[value - 1] : 'No rating yet'}</p>

UI Slots

Use the ui prop to override classes.

Slot	Description
`root`	`The rating group container`
`item`	`Each rating item wrapper`
`icon`	`The inactive (empty) icon`
`iconActive`	`The active (filled) icon`
`partial`	`The clipped half of a partial icon`

Props

Prop	Type	Default	Description
`value`	`number`	`0`	`Current rating (bindable)`
`onValueChange`	`(value: number) => void`	`-`	`Callback when the rating changes`
`max`	`number`	`5`	`Number of icons`
`allowHalf`	`boolean`	`false`	`Allow half-step ratings`
`readonly`	`boolean`	`false`	`Display-only, no interaction`
`hoverPreview`	`boolean`	`false`	`Preview the value while hovering`
`icon`	`string`	`icons.star`	`Icon rendered for each item`
`activeIcon`	`string`	`-`	`Icon for active / filled items`
`fill`	`boolean`	`true`	`Fill active icon paths via CSS`
`color`	`ColorType`	`'primary'`	`Color of filled icons`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Icon size`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`Layout and keyboard direction`
`disabled`	`boolean`	`false`	`Disable interaction`
`required`	`boolean`	`false`	`Required for forms`
`name`	`string`	`-`	`Form field name`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

RadioGroup Select