Skip to content
Inputs & Forms

Rating

client36 kB
@stellaria/nebula-webRatingProps

Preview

Props

22
PropTypeDefault

className

string

color

ColorExtended"warning"

count

number5

defaultValue

number0

description

ReactNode

disabled

booleanfalse

emptySymbol

ReactNode

error

string | boolean

errorDisplay

ErrorDisplay"tooltip"

field

NebulaField<number>

fractions

number1

fullSymbol

ReactNode

itemLabel

((value: number) => string)

label

ReactNode

name

string

onChange

((value: number) => void)

onHoverChange

((value: number) => void)

readOnly

booleanfalse

required

booleanfalse

rootClassName

string

size

Size"md"

value

number

Slot props

9

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

bodyProps

Wrapper for the control.

BoxSlotProps

descriptionProps

Help text below the label. Only rendered with `description`.

TextSlotProps

errorProps

Configures the `FieldError`. With `errorDisplay="tooltip"` it spreads whole; with `"text"` there is no `FieldError` to configure — it is a `Text` with `role="alert"` — and only `className` is honoured.

Omit<FieldErrorProps, "children">

groupProps

The row of symbols. It is a `radiogroup`, or an `img` with `readOnly`.

BoxSlotProps

headerProps

The label and description row. Not rendered when the field has neither.

BoxSlotProps

itemProps

Every symbol. It spreads over ALL of them, and serves two elements: a `button` when it can be rated and a `span` with `readOnly`.

BoxSlotProps

labelProps

The field label. It lands on the `<label>`, which already carries the control `htmlFor`.

TextSlotProps

partialProps

The partial fill of a half symbol. Only rendered when the value falls between two symbols, with or without `fractions`. Its width is written AFTER the slot, because it is the fraction it represents.

BoxSlotProps

requiredProps

The required asterisk, which lives inside the label. Only rendered with `required`.

BoxSlotProps

Also accepts

On top of its own props, this component forwards these groups.

Style props · 127