Likert Scale

Likert scale rating input

UI PrimitiveForm Inputs

Overview

Renders a horizontal row of radio buttons sized to fill available width. Supports 3, 5, or 7 point scales with customizable labels. Styled to highlight the selected option with a primary background.

Usage

import { LikertScale } from "@leanicon/web-builder-library";

const [value, setValue] = React.useState<string>();

<LikertScale points={5} value={value} onValueChange={setValue} />;

Variants

5-point scale (default)

3-point scale

7-point scale

Custom labels

Notes

Default labels for 5-point: "Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree".
Each item shows its numeric value (1–N) above the label text.
Dark mode is handled via semantic tokens.

Props

Name	Type	Default	Required
`value`	`string`	—	No
`onValueChange`	`((value: string) => void)`	—	No
`points`	`enum`	`5`	No
`labels`	`string[]`	—	No
`disabled`	`boolean`	—	No
`className`	`string`	—	No
`name`	`string`	—	No