Tessina UI
ConfiguratorGitHubIntroduction
InstallationUsageTheming
ComponentsAccordionAction SheetAlertAlertDialogArea ChartAspectRatioAvatarBadgeBannerBar ChartBottom NavBreadcrumbButtonButtonGroupCalendarCardCarouselChartChatBubbleCheckboxChipCodeBlockCollapsibleColor PickerComboboxCommandContainerContextMenuDate PickerDividerDrawerDropdown MenuEmptyStateFABFieldFieldsetFile UploadFile Upload 2FlexFormGridHoverCardIconButtonLabelLine ChartLinkMenubarMeterModalNavigation MenuNumberFieldOTP InputPaginationPie ChartPopoverProgressPromptInputRadar ChartRadial ChartRadioRatingScroll AreaSearchSegmentedControlSelectShortcutSidebarSkeletonSliderSpacerSpinnerSplit ButtonStackStatusStepperSurfaceSwitchTableTabsTextareaTime PickerToastToggleButtonToggleGroupToolbarTooltipTop Header DesktopTop Header Mobile
Contributing
Components

Rating

Captures user sentiment in four patterns — star scale, numeric NPS scale, emoji reaction picker, and binary thumbs — with full intent palette, half-star precision, RTL support, and keyboard navigation.

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Rating } from "@tessinaui/ui";
{/* Star (default) */}
<Rating defaultValue={4} />

{/* Half-star */}
<Rating precision={0.5} defaultValue={3.5} />

{/* NPS numeric scale */}
<Rating variant="numeric" max={10} showLabel lowLabel="Not likely" highLabel="Extremely likely" />

{/* Emoji reactions */}
<Rating variant="reaction" showLabel />

{/* Binary thumbs */}
<Rating variant="binary" />

Examples

Default

A basic star rating with four of five stars filled.

Variants

Four sentiment patterns — star, numeric, reaction, and binary.

Sizes

Five size tokens from xs to xl.

Intents

Color intents map to the semantic palette — warning, primary, error, success, and info.

Half-star precision

Set precision={0.5} to allow half-star selection.

States

Read-only, disabled, and loading skeleton states.

Variants

VariantPatternUse case
star★★★★☆Product ratings, review scores
numeric1 2 3 … 10NPS, customer satisfaction (CSAT)
reaction😡 😕 😐 🙂 😄App feedback, quick sentiment
binary👎 👍Helpful / not helpful, like

API Reference

PropTypeDefaultDescription
variant"star" | "numeric" | "reaction" | "binary""star"Visual pattern
valuenumber | null—Controlled value (null = nothing selected)
defaultValuenumber | nullnullUncontrolled initial value
onChange(value: number | null) => void—Called when the value changes
maxnumber5 (star) / 10 (numeric)Number of stars or scale buttons
size"xs" | "sm" | "md" | "lg" | "xl""md"Size token
intent"none" | "warning" | "primary" | "error" | "success" | "info""warning" (star) / "primary" (others)Colour intent
readOnlybooleanfalsePrevent interaction, render current value
disabledbooleanfalsePrevent interaction, reduce opacity
precision1 | 0.51Star variant only — 0.5 enables half-star selection
allowClearbooleanfalseAllow clicking the active value to deselect
dir"ltr" | "rtl""ltr"Text direction — reverses star order and half-star clip anchor
iconReactNode—Star variant — custom filled icon
emptyIconReactNode—Star variant — custom empty icon
itemsRatingItem[]built-inReaction/binary — custom option list
showLabelbooleanfalseStar: shows 3 / 5. Numeric: shows endpoint labels. Reaction/binary: shows selected item label
lowLabelstring—Numeric — left endpoint label (visible when showLabel is true)
highLabelstring—Numeric — right endpoint label (visible when showLabel is true)
labelstring—Accessible aria-label on the radiogroup
classNamestring—Additional classes on the root element

RatingItem

Used by items prop for the reaction and binary variants.

FieldTypeDescription
valuenumberUnique option value
labelstringButton label and accessible name
iconReactNodeOptional icon rendered before the label

Notes

  • Accessibility — The root renders role="radiogroup" and each option renders role="radio" with aria-checked. Screen readers announce the selection correctly without additional ARIA configuration.
  • Keyboard navigation (star) — Arrow keys step by precision (1 or 0.5). Home selects the minimum, End the maximum, Delete/Backspace clears when allowClear is true.
  • Half-star display — A value of 3.5 renders the fourth star half-filled using an overflow-hidden clip span. The clip anchor (left: 0 vs right: 0) flips automatically for RTL.
  • Custom icons — Any ReactNode works as icon / emptyIcon. Size is inherited from the button's width — use the same icon class (size-6 for md) to keep alignment.
  • RTL — dir="rtl" reverses the star row via flex-row-reverse and mirrors the half-star fill anchor. Reaction and binary variants inherit RTL from the dir prop on the root.
  • Controlled vs uncontrolled — Pass value + onChange for controlled, or defaultValue alone for uncontrolled. The two modes are mutually exclusive — once value is defined the component is fully controlled.

Radio

A form control that lets users select exactly one option from a group. Five sizes, five intents, label/description/error patterns, RadioGroup compound component, and RadioCard full-surface variant.

Scroll Area

A scrollable container with custom overlay scrollbars that do not steal layout space. Supports vertical, horizontal, and both-axis content with a neutral branded thumb, RTL, and a compound API for full control.

On this page

PlaygroundInstallationUsageExamplesDefaultVariantsSizesIntentsHalf-star precisionStatesVariantsAPI ReferenceRatingItemNotes