Rating

A row of square buttons from min (default 1, may be 0) through max (default 5, between 2 and 10). The value is an integer. Field renders it for rating.

#Preview

#Usage

// { key: 'score', type: 'rating', label: 'How likely are you to recommend us?', max: 5, required: true }
import { Form } from '@trymirio/mirio';

<Form schema={feedback} client={mirio} />

// by hand:
import { Rating } from '@trymirio/mirio';
<Rating name="score" buttonClassName="rounded-full" />

#Props

Prop	Type	Default	Description
name	string	required	The field key. The range comes from the schema: field.min (default 1) to field.max (default 5).
className	string	flex flex-wrap gap-2	Merged onto the group element.
buttonClassName	string	rating button classes (size-10 …)	Merged onto every button.
…<div> attributes			Spread on the group element (except onChange).

Rendered: <div id role="radiogroup" tabindex="-1" aria-labelledby data-mirio="rating"> with one <button type="button" role="radio" aria-checked aria-label="3 of 5" data-value="3">3</button> per step. Only the chosen number is highlighted (it is a scale, not stars).

#Variants and states

• Checked: --mirio-primary background with --mirio-primary-fg text.
• Hover: --mirio-muted.
• Error: aria-invalid on the group, message below.
• Prefill: defaultValue: 4.

#Customization

• Tokens: --mirio-bg, --mirio-fg, --mirio-border, --mirio-muted, --mirio-primary, --mirio-primary-fg, --mirio-ring, --mirio-radius.
• Larger: buttonClassName="size-12 text-base". A 0–10 scale wraps because the group is flex-wrap; use className="flex-nowrap gap-1" to keep it on one line.
• To render stars or emoji, build on useField(name) and keep the radio semantics below.
• CSS hooks: [data-mirio="rating"], [data-mirio="rating"] [aria-checked="true"], [data-value="5"].

#Accessibility

role="radiogroup" labelled by the field label; each step is role="radio" with aria-checked and an aria-label like "3 of 5"; roving tabindex; arrow keys and Home/End move selection and focus.

#Related

YesNo, Choice, Schema: field types