Stars
Ratings in half stars, and StarRating, a rating input that works from the keyboard.
import { Stars, StarRating } from '@iffday/ui';Display
Ratings are stored in half stars: steps runs from 1 to 10, so 7 is three and a half stars. Full stars are brand red and empty ones light grey; size sets the star size, 14px by default. A screen reader reads 3.5 stars.
import { Stars } from '@iffday/ui';
export default function Example() {
return (
<div style={{ display: 'grid', gap: 10, justifyItems: 'start' }}>
<Stars steps={10} />
<Stars steps={7} />
<Stars steps={3} size={20} />
<Stars steps={null} size={20} />
</div>
);
}Rating
StarRating is a radio group: the left half of each star is a half star and the right half a whole one, and the arrow keys move half a star at a time. The rating under a film page’s poster is this component, 30px by default.
import { useT } from '@iffday/i18n';
import { StarRating } from '@iffday/ui';
import { useState } from 'react';
export default function Example() {
const t = useT();
const [steps, setSteps] = useState<number | null>(7);
return (
<div style={{ display: 'grid', gap: 8, justifyItems: 'center' }}>
<StarRating value={steps} onValueChange={setSteps} />
<span style={{ color: 'var(--text-2)', fontSize: 13 }}>
{steps === null ? t('film.card.noRating') : t('review.rating.stars', { 0: steps / 2 })}
</span>
</div>
);
}Props
Read-only stars for a rating in half-star steps (1–10 steps = ½–5 stars).
| Prop | Type | Default |
|---|---|---|
steps* | number | null | undefined | |
size | number | 14 |
StarRating
packages/ui/src/rating.tsx:50Half-star rating input. A Base UI radio group carries keyboard, focus and screen-reader semantics; each star has a left (half) and right (whole) hit area.
| Prop | Type | Default |
|---|---|---|
value* | number | null | |
onValueChange* | (steps: number) => void | |
disabled | boolean | |
size | number | 30 |
label | string |