Rating

In FORMA

• Liegt in kit/arc/rating und ist über @/forma/arc/rating/rating erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Collecting a 1 to N score in reviews or feedback forms.
• Displaying average scores, with readOnly and allowHalf.
• Forms that submit natively, via name.

When not to use

• Use slider for continuous values.
• Use reactions for emoji feedback on content.
• Use radio-group when options are labelled choices rather than a scale.

Usage

import { Rating } from "@/forma/arc/rating/rating";

export function ReviewForm() {
  const [stars, setStars] = useState(0);
  return (
    <form>
      <Rating label="Overall experience" value={stars} onChange={setStars} name="rating" />
    </form>
  );
}

API reference

Rating

A star rating built as a radio group, with half stars, scrubbing, clearing, and a rolling value label.

Keyboard interactions

Accessibility

• Interactive ratings are role="radiogroup" with one role="radio" per step and a roving tab stop on the checked value.
• Each radio is labelled like "Great, 4 of 5 stars"; commits are announced in a polite live region.
• readOnly renders role="img" with an aria-label such as "Quality: 4 out of 5".

Motion

• The fill sweeps star by star with a small stagger in the direction the value moved; a commit pops the stars in a wave.
• Pressed stars dip to 0.86 scale and the value word rolls in the direction of change.
• Reduced motion sets fills instantly and drops the pop, press scale, and word roll.

Responsive behavior

• Stars sit in 36px cells for easy touch targets, and the value label wraps under the stars when space runs out.
• Touch presses scrub across stars with pointer capture; touch-action pan-y keeps vertical scrolling working.

Performance

• Fills and pops are short motion animations per star; fine for a form, but use readOnly for long lists of scores.

Notes for AI

• Use for collecting or showing a 1 to N score. Use slider for continuous values and reactions for emoji feedback.
• Pass name to submit with a native form. Use readOnly to display averages; combine with allowHalf for fractional values.

Related

• Slider: Pick a value or a range on a track that follows your finger.
• Reactions: Acknowledge a post in one tap, with counts that roll.
• Radio group: Choose one option from a visible set.

Also in toggles

• Radio cards: Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
• Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.
• Checkbox: A binary choice with a precise, legible state.
• Switch: A tactile toggle for settings that take effect immediately.
• Segmented control: Switch between a small set of related views.

Guidance for AI tools

Rating: A simple, accessible way to capture a numeric opinion. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt