Inputs@knitui/components

Rating

Rating renders count star symbols that support hover preview, fractional selection, read-only display and clearable interaction. The filled accent follows the active theme palette ramp via the theme prop. Custom symbols can be passed as nodes or as (value) => node functions.

WebiOSAndroid3 style slots14 own props13 examples

Stories Source Tests Open in Storybook

import { Rating } from "@knitui/components";

Playground

Loading playground…

sizeSymbol size — either a named key or a custom pixel value.

countNumber of symbols rendered.

fractionsSub-divisions per symbol (e.g. 2 = half-stars).

valueControlled value.

defaultValueUncontrolled initial value.

readOnly

false

allowClear

true

highlightSelectedOnly

false

disabled

false

theme

Playground

<Rating
  count={5}
  size="sm"
  fractions={1}
  readOnly={false}
  allowClear
  highlightSelectedOnly={false}
  disabled={false}
/>

Examples

Sizes

All named sizes side by side, from xxs to xxl.

Loading example…

SizesSource Storybook

Theme Accent

Theme-driven accent color via Tamagui's theme prop.

Loading example…

Theme AccentSource Storybook

Read Only

Read-only display — no interactive segments are rendered, hover has no effect.

Loading example…

Read OnlySource Storybook

Disabled

Disabled state — reduced opacity and pointer events turned off.

Loading example…

DisabledSource Storybook

Half Stars

Half-star precision via fractions={2} — hover and select at 0.5 intervals.

Loading example…

Half StarsSource Storybook

Highlight Selected Only

Highlights only the selected symbol rather than all symbols up to it.

Loading example…

Highlight Selected OnlySource Storybook

Shadows

Elevation shadow ladder applied via the inherited shadow prop.

Loading example…

ShadowsSource Storybook

Custom Symbols

Custom symbol nodes replace the default star glyphs for empty and filled states.

Loading example…

Custom SymbolsSource Storybook

Custom Count

Custom count — ten-point scale with a heart theme.

Loading example…

Custom CountSource Storybook

Controlled

Fully controlled — value is managed in React state; onChange keeps it in sync.

Loading example…

ControlledSource Storybook

Matrix

Dense visual regression matrix across sizes and common states.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts — here the root and each symbol.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`allowClear`	`boolean \| undefined`	`true`	Clicking the current value clears it to 0.
`count`	`number \| undefined`	`5`	Number of symbols rendered.
`defaultValue`	`number \| undefined`	—	Uncontrolled initial value.
`disabled` system	`boolean \| undefined`	`false`	—
`emptySymbol`	`ReactNode \| ((value: number) => ReactNode)`	—	Symbol shown for the unfilled part. Node or `(value) => node`.
`form`	`string \| undefined`	—	Associated form id for the hidden input.
`fractions`	`number \| undefined`	`1`	Sub-divisions per symbol (e.g. 2 = half-stars).
`fullSymbol`	`ReactNode \| ((value: number) => ReactNode)`	—	Symbol shown for the filled part. Node or `(value) => node`.
`getSymbolLabel`	`((value: number) => string) \| undefined`	`String(value)`	Generate the `aria-label` for each symbol.
`highlightSelectedOnly`	`boolean \| undefined`	`false`	Highlight only the selected symbol, not all up to it.
`name`	`string \| undefined`	—	Hidden input name for web form submission.
`onChange`	`((value: number) => void) \| undefined`	—	Called when the value changes.
`onHover`	`((value: number) => void) \| undefined`	—	Called as the pointer moves over symbols; receives `-1` on leave.
`readOnly`	`boolean \| undefined`	`false`	Prevent user interaction.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—	—
`size` system	`RatingSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"sm"`	Symbol size — either a named key or a custom pixel value.
`styles` system	`SlotStyles<RatingStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Applies a theme to this element
`value`	`number \| undefined`	—	Controlled value.

Style slots

Every part of Rating can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Targets
`root`	Props for the row container (`Rating.Root`).
`segment`	Props for each interactive sub-segment overlay (`Rating.Segment`).
`symbol`	Props for each symbol frame (`Rating.Symbol`).

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.