Rating
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add forms/ratingPlain-CSS theme — no build step
npx astrocraft-ui add forms/rating --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add forms/rating --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add forms/rating --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add forms/rating --theme tailwind --bridge lumosLive demo
Rating
A radio group wearing stars — and the only primitive in this phase that ships NO JavaScript. The browser already does single-select, arrow-key roving and submission; all this adds is the group's name and the sibling order a theme fills the stars from. The read-only one is a single image with one name, because an average rating is not something to tab through.
RatingDisplay
The read-only half of Rating, and a different component because of the fraction: Rating is a radio group, and you cannot check 4.2 radios. The exact value is in the announcement and in data-value; each star reports its own fill so a theme can draw the partial one.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Rating.astro` | `rating` `rating-label` `rating-star` | `data-size`: `sm` · `md` · `lg` | — | `[checked]` |
| `RatingDisplay.astro` | `rating-display` `rating-star` | `data-size`: `sm` · `md` · `lg` | — | — |
| `RatingItem.astro` | `rating-input` `rating-item` `rating-star` | — | — | — |
Source
What the command copies — 4 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
import RatingItem from "./RatingItem.astro";
type Props = HTMLAttributes<"fieldset"> & {
name: string;
value?: number;
max?: number;
label?: string;
readonly?: boolean;
readonlyLabel?: string;
size?: "sm" | "md" | "lg";
};
const {
name,
value = 0,
max = 5,
label = "Rating",
readonly = false,
readonlyLabel,
size = "md",
class: className,
...rest
} = Astro.props;
const stars = Array.from({ length: max }, (_, i) => i + 1);
---
{
readonly ? (
<span
role="img"
aria-label={readonlyLabel ?? `${value} / ${max}`}
class={className}
data-slot="rating"
data-readonly="true"
data-size={size}
data-value={value}
>
{stars.map((star) => (
<slot name="star">
<svg
data-slot="rating-star"
data-filled={star <= value ? "true" : undefined}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.3l6.5-.9z" />
</svg>
</slot>
))}
</span>
) : (
<fieldset
role="radiogroup"
class={className}
data-slot="rating"
data-size={size}
data-value={value}
{...rest}
>
<legend data-slot="rating-label">{label}</legend>
{stars.map((star) => (
<RatingItem name={name} value={star} checked={star === value} />
))}
</fieldset>
)
}
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"span"> & {
value: number;
max?: number;
label?: string;
size?: "sm" | "md" | "lg";
};
const { value, max = 5, label, size = "md", class: className, ...rest } = Astro.props;
const stars = Array.from({ length: max }, (_, i) => i + 1);
const fillOf = (n: number) => Math.max(0, Math.min(1, value - (n - 1)));
const stateOf = (n: number) => {
const fill = fillOf(n);
if (fill >= 0.75) return "true";
return fill >= 0.25 ? "half" : undefined;
};
---
<span
role="img"
aria-label={label ?? `${value} out of ${max}`}
class={className}
data-slot="rating-display"
data-size={size}
data-value={value}
data-max={max}
{...rest}
>
{
stars.map((star) => (
<slot name="star">
<svg
data-slot="rating-star"
data-filled={stateOf(star)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.3l6.5-.9z" />
</svg>
</slot>
))
}
</span>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"input"> & {
name: string;
value: number;
label?: string;
};
const { name, value, label, class: className, ...rest } = Astro.props;
---
<label data-slot="rating-item" data-value={value}>
<input
type="radio"
name={name}
value={value}
aria-label={label ?? String(value)}
data-slot="rating-input"
class={className}
{...rest}
/>
<slot name="star"
><svg
data-slot="rating-star"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.3l6.5-.9z"></path>
</svg></slot
>
</label>
import Rating from "./Rating.astro";
import RatingDisplay from "./RatingDisplay.astro";
import RatingItem from "./RatingItem.astro";
export { Rating, RatingDisplay, RatingItem };
export default Rating;
What you get
The component source, copied into your project by npx astrocraft-ui add forms/rating — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.