RatingField

Renders a numeric rating as a row of stars.

Installation

pnpm dlx shadcn@latest add @chelone/rating-field
Loading preview…

Renders a numeric rating as a row of stars.

Props

PropTypeDefaultDescription
allowHalfboolean—Allow half-star granularity when value is between integers.
cellClassNamestring—A class name to apply to the cell element when used inside `<DataTable>`.
classNamestring—A class name to apply to the root element.
countSourceSourceKey<RecordType>—Sibling record field rendered in parentheses (e.g. review count). A top-level key, not a path: the read is `record[countSource]`.
defaultValueSourceValue<RecordType, SourceProp<RecordType>>—
emptyReactNode—The node to display when the field value is empty. Defaults to nothing. A string is translated; a ReactNode renders as-is.
headerClassNamestring—A class name to apply to the header cell element when used inside `<DataTable>`.
labelReactNode—Label to use as column header when using `<DataTable>` or `<SimpleShowLayout>`. Defaults to the capitalized field name. Set to `false` to disable the label.
maxnumber—Total stars rendered (filled + outlined). Default 5.
recordRecordType—The record to render. Defaults to the ambient `RecordContext` value.
resourcestring—The resource name. Defaults to the ambient `ResourceContext` value.
sortableboolean—Disable the header click handler when used inside `<DataTable>`.
sortBystring—The field to sort by when this column head is clicked, if sortable.
sortByOrderSortOrder—The order used for sorting when this column head is clicked, if sortable.
sourceSourceProp<RecordType>—Name of the property to display (dot/bracket path).
textAlignTextAlign—The text alignment for the cell content, when used inside `<DataTable>`.