Tessina UI
Tessina UI
GitHubIntroduction
InstallationUsageTheming
Components
ButtonIconButtonLinkSpinnerBadgeAvatarStatusChipShortcutSkeletonSurfaceProgressMeterRating
LabelFieldFieldsetCheckboxRadioSwitchSliderSelectComboboxSearchTextareaNumberFieldDate PickerTime PickerOTP InputFile UploadCalendar
AlertBannerToastTooltip
TabsAccordionCollapsibleBreadcrumbPaginationStepperSegmentedControlButtonGroupToggleButtonToggleGroupToolbarNavigation MenuMenubarBottom NavSidebar
Split ButtonFABDropdown MenuContextMenuCommandPopoverHoverCard
ContainerStackFlexGridAspectRatioSpacerCardCarouselDividerScroll Area
Table
ChatBubblePromptInputCodeBlock
ModalAlertDialogDrawerAction SheetTop Header MobileTop Header DesktopEmptyStateForm
Contributing
ComponentsEssentials

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" />

Showcase

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.

Meter

Gauge displaying a known value within a fixed range — battery, disk usage, score, capacity. Linear or circular, four sizes, full intent palette with optional threshold-based auto-coloring, locale-aware formatting, and a multi-segment MeterGroup variant for stacked usage.

Label

A foundational form label primitive. Five sizes, five intents, three tones, three weights, required/optional indicators, leading/trailing icons, optional description, and RTL support.

On this page

PlaygroundInstallationUsageShowcaseVariantsAPI ReferenceRatingItemNotes