Rating — Pulse Docs

Star rating component with two modes. Without name: a read-only display that supports half-star values. With name: an interactive radio group that submits the selected value in FormData — no JavaScript required.

Display (read-only)

Omit name to render a read-only display. Pass value as a number — halves are supported.

rating({ value: 5   })   // 5 stars
rating({ value: 3.5 })   // 3½ stars
rating({ value: 2   })   // 2 stars
rating({ value: 0   })   // empty

Sizes

rating({ value: 4, size: 'sm' })
rating({ value: 4, size: 'md' })
rating({ value: 4, size: 'lg' })

Interactive

Add name to render radio inputs. Hovering a star previews the selection; clicking locks it. The selected value is submitted in FormData.

rating({ name: 'score', label: 'Your rating', value: state.score, size: 'lg' })

In a card

Noise-Cancelling Headphones

4.5 · 1,284 reviews

Crystal-clear audio with 40-hour battery life and adaptive noise cancellation.

card({
  title:   'Noise-Cancelling Headphones',
  content:
    '<div style="display:flex;align-items:center;gap:.75rem">' +
      rating({ value: 4.5 }) +
      '<span>4.5 · 1,284 reviews</span>' +
    '</div>' +
    '<p>Crystal-clear audio...</p>',
})

Disabled

rating({ name: 'locked', value: 4, disabled: true })

In forms

The interactive rating submits the selected star count as a number string under name in FormData. Read it with Number(formData.get('score')). If nothing is selected, the field is absent from FormData.

Prop	Type	Default
`value`	number	0	Current rating. Supports 0.5 steps in display mode.
`max`	number	5	Total number of stars
`name`	string	—	Field name — enables interactive radio mode
`label`	string	—	Accessible group label (interactive mode only)
`size`	`sm \| md \| lg`	`md`	1rem / 1.5rem / 2rem
`disabled`	boolean	false	Interactive mode only
`class`	string	—