Skip to content
Inputs & Forms

Rating

client36.5 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