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 'kibbleforms';

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

// by hand:
import { Rating } from 'kibbleforms';
<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-kb="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: --kb-primary background with --kb-primary-fg text.
• Hover: --kb-muted.
• Error: aria-invalid on the group, message below.
• Prefill: defaultValue: 4.

#Customization

• Tokens: --kb-bg, --kb-fg, --kb-border, --kb-muted, --kb-primary, --kb-primary-fg, --kb-ring, --kb-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-kb="rating"], [data-kb="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