Rating | Neural UI v2

Usage

The model is number | null. stars sets the scale and step accepts 1 or 0.5. Activating the selected option again clears the rating to null; the application can also clear it directly. Use readonly to present an existing rating without allowing edits.

Examples

Interact with the example and open Code for its complete implementation.

Use the arrow keys for half-star steps. The value remains a number; null means no rating.

Rating value

Try and configure

Change the controls and try the live preview. Expand the application value or event to inspect its real data; the generated template stays with the configurator.

Live preview

Current application value

Advanced options · 9

Generated template: the options above. The Code tab contains the imports and state.

<neu-rating
  [(value)]="number"
  [stars]="5"
  [step]="1"
  [label]="'Your rating'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const number = signal(null);

Data, callback and structured configuration inputs

Signal Forms

Bind FormField once to the component; the field owns value and validation. The schema requires a non-empty value. Leave the control to mark it touched, then reset the field to clear both value and interaction state.

Signal Forms guide

Valid: false

Form value

Value and events

Use [(value)] or [value] with (valueChange), not both. The model synchronizes application state; other Outputs communicate their documented events. touch reports leaving/visiting the control, not a new value.

Accessibility and keyboard

Name the rating group with label or ariaLabel. The selected option is the tab stop; arrow keys change the rating without tabbing through every star. Home/End reaches the first or last option. Space/Enter activates an option and clears it when already selected. readonly keeps the value available without allowing edits.

Key	Action
`Tab`	Enters the group at the selected rating, or its first option.
`Arrow keys`	Selects the next or previous option; horizontal direction follows RTL.
`Home / End`	Selects the first option or the maximum rating.
`Space / Enter`	Activates the focused option; activating the current rating clears it.

API

Inputs, models and Outputs come from the pinned Core contract. Click named types to open their definitions. This component has no public template slots.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs of elements describing the control, separated by spaces.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Accessible name when no visible label is available.
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents user interaction.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-rating-')`Derived default	`[inputId]`	Stable identifier of the native control; automatically generated when omitted.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`label`	`string`	`''`	`[label]`	Visible label and accessible name of the control.
`name`	`string`	`''`	`[name]`	Name associated with the native form control.
`pending`	`boolean`	`false`	`[pending]`	Form state indicating that asynchronous validation is pending.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the control focusable and readable without accepting edits.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`stars`	`number`	`5`	`[stars]`	Number of stars in the rating scale.
`step`	`1 \| 0.5`	`1`	`[step]`	1 for full stars or 0.5 for half stars.
`touched`	`boolean`	`false`	`[touched]`	Form state indicating that the control has been visited.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`value`	`number \| null`	`null`	`[(value)]`	Committed number or null for an empty value; synchronized through valueChange.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`touch`	`void`	`(touch)="onTouch($event)"`	Notifies the form that the control has been touched; not a value change.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Styles and tokens

Load Core styles once. Use the public tokens below for local customization or a preset for application-wide changes. Keep labels, focus, selected options and disabled states readable in both light and dark themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-font-sans`	Text typography	Shared by other Core consumers; scope the override.	`'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
`--neu-radius-sm`	Corner radius	Shared by other Core consumers; scope the override.	`6px`
`--neu-warning-text`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#92400e`

Related components

Use the related controls for a different kind of value or interaction.