Lily Design System™

Five Face Rating Picker Button

A five-face rating picker button is an individual button within a FiveFaceRatingPicker that represents one satisfaction level on a 1-5 scale. Each button corresponds to a face label such as "Very bad", "Bad", "Okay", "Good", or "Very good". When clicked, it selects that rating value. The component uses aria-pressed to indicate the currently selected state, making it accessible to screen readers and keyboard users.

Example

Show demo markup 
<button class="five-face-rating-picker-button" role="radio" aria-checked="false">😊</button>
Usage example 
<script lang="ts">
    import FiveFaceRatingPickerButton from "./FiveFaceRatingPickerButton.svelte";
    let rating = $state(0);
    const labels = ["Very bad", "Bad", "Okay", "Good", "Very good"];
</script>

<div role="group" aria-label="Experience">
    {#each labels as label, i}
        <FiveFaceRatingPickerButton
            value={i + 1}
            {label}
            selected={rating === i + 1}
            onclick={() => rating = i + 1}
        />
    {/each}
</div>
Show Svelte source 
// In your Svelte component:
import FiveFaceRatingPickerButton from "lily-design-system-svelte-headless/components/FiveFaceRatingPickerButton/FiveFaceRatingPickerButton.svelte";

<FiveFaceRatingPickerButton>FiveFaceRatingPickerButton</FiveFaceRatingPickerButton>

Usage

<FiveFaceRatingPicker label="How was your experience?">
    <FiveFaceRatingPickerButton value="1" label="Very bad" onclick={handleClick} />
    <FiveFaceRatingPickerButton value="2" label="Bad" onclick={handleClick} />
    <FiveFaceRatingPickerButton value="3" label="Okay" onclick={handleClick} />
    <FiveFaceRatingPickerButton value="4" label="Good" selected onclick={handleClick} />
    <FiveFaceRatingPickerButton value="5" label="Very good" onclick={handleClick} />
</FiveFaceRatingPicker>

Props

  • value: string (required) -- the rating value this button represents (e.g., "1", "2", "3", "4", "5")
  • selected: boolean (default: false) -- whether this button is currently selected
  • label: string (required) -- accessible label for the button (e.g., "Very bad", "Bad", "Okay", "Good", "Very good")
  • onclick: callback -- handler called when the button is clicked
  • ...restProps: any -- additional HTML attributes spread onto the <button> element

Keyboard Interactions

  • Tab: Focus the button
  • Enter / Space: Activate the button to select this rating

ARIA

  • aria-pressed -- indicates whether this button is the currently selected rating (true when selected, false otherwise)
  • aria-label -- provides the accessible name for the button (e.g., "Very good")

When to Use

  • Use inside FiveFaceRatingPicker to represent one satisfaction level in a 1-5 face rating scale.
  • Use when each face rating option needs individual styling, icons, or interactive behavior.
  • Use to provide custom face illustrations or emoji for each satisfaction level.

When Not to Use

  • Do not use outside of a FiveFaceRatingPicker -- it requires the parent picker for group semantics.
  • Do not use as a standalone toggle button -- use ToggleButton instead.

Headless

This headless component provides a <button> with aria-pressed to indicate the selected state, aria-label for the face description, and click handling for selection. The consumer provides all visual styling, face icons or emoji, and hover/focus effects.

Styles

The consumer provides all CSS styling. The component renders with a .five-face-rating-picker-button class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <button> element with class five-face-rating-picker-button
  • Verify aria-label` -- provides the accessible name for the button (e.g., "Very good")
  • Verify keyboard interactions work correctly
  • Verify pass-through attributes are applied

Advice

  • Designers: Make the selected state visually distinct (e.g., highlighted border, increased size, or color change). Ensure each face button has enough tap target size for touch devices.
  • Developers: Pass the selected prop to control aria-pressed. Use the onclick handler to update the parent picker's value. The value prop carries the numeric rating for form submission.

Implementation Notes

  • Renders as a <button> element with aria-pressed for toggle state
  • Designed to be used inside a FiveFaceRatingPicker component
  • Each button represents one of five satisfaction levels (1-5)
  • The selected prop controls aria-pressed to indicate the active selection
  • The label prop provides both the visible text and the accessible name via aria-label
  • Spreads ...restProps onto the <button> element for consumer customization

Related components

  • five-face-rating-picker — a picker for selecting a 1-5 satisfaction rating using face labels

References

  • WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: five-face-rating-picker-button
  • PascalCase: FiveFaceRatingPickerButton
  • Description: a picker button for selecting a 1-5 satisfaction rating using face labels
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <button>
  • CSS class: .five-face-rating-picker-button
  • Interactive: yes

ARIA

  • aria-pressed -- indicates whether this button is the currently selected rating (true when selected, false otherwise)
  • aria-label -- provides the accessible name for the button (e.g., "Very good")

Keyboard

  • Tab: Focus the button
  • Enter / Space: Activate the button to select this rating

Props

  • value: string (required) -- the rating value this button represents (e.g., "1", "2", "3", "4", "5")
  • selected: boolean (default: false) -- whether this button is currently selected
  • label: string (required) -- accessible label for the button (e.g., "Very bad", "Bad", "Okay", "Good", "Very good")
  • onclick: callback -- handler called when the button is clicked
  • ...restProps: any -- additional HTML attributes spread onto the <button> element