Rate
Rate captures or displays simple rating values.
@duskmoon-dev/components/rateUsage
When to use
- Use it inside forms, filters, settings, and any workflow that captures user input.
- Prefer controlled props when the value must stay synchronized with application state.
Implementation notes
Features
Documents default values, value props, and change callbacks for form integration.
Surfaces status, size, disabled, and option data patterns where the component supports them.
Rate is most often configured through `value`, `defaultValue`, `onChange`, `count`.
Renders with default classes
Feature Demos
Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.
Colors
Rate supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
const colors = [
"primary",
"secondary",
"tertiary",
"accent",
"neutral",
"base",
"info",
"success",
"warning",
"error"
] as const;
export function RateColorsDemo() {
return (<div style={{ display: "grid", gap: 10 }}>
{colors.map((color) => (
<Rate key={color} color={color} defaultValue={4} readOnly />
))}
</div>);
}Basic usage
Import the component stylesheet and Rate from its package subpath, then render it with the core props.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function Example() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Renders with default classes
test-backedRate scenario from the component test coverage: renders with default classes.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateRendersWithDefaultClassesDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Supports custom count
test-backedRate scenario from the component test coverage: supports custom count.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateSupportsCustomCountDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Fills items from defaultValue
test-backedRate scenario from the component test coverage: fills items from defaultvalue.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateFillsItemsFromDefaultValueDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Marks the half item when allowHalf is enabled
test-backedRate scenario from the component test coverage: marks the half item when allowhalf is enabled.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateMarksTheHalfItemDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Applies disabled class
test-backedRate scenario from the component test coverage: applies disabled class.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateAppliesDisabledClassDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Calls onChange with clicked value
test-backedRate scenario from the component test coverage: calls onchange with clicked value.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateCallsOnChangeWithClickedDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Clears when allowClear is enabled and current value is clicked
test-backedRate scenario from the component test coverage: clears when allowclear is enabled and current value is clicked.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateClearsWhenAllowClearIsDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Applies custom className
test-backedRate scenario from the component test coverage: applies custom classname.
import "@duskmoon-dev/components/styles.css";
import { Rate } from "@duskmoon-dev/components/rate";
export function RateAppliesCustomClassNameDemo() {
return (<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>);
}Theme aware
Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.
<div data-theme="sunshine">
<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>
</div>
<div data-theme="moonlight">
<Rate
defaultValue={3.5}
allowHalf
color="warning"
size="lg"
/>
</div>API
The API reference below lists every parsed exported type or interface for Rate. Start with `value`, `defaultValue`, `onChange`, `count` for common usage.
packages/components/src/components/rate/Rate.types.tsScenarios: packages/components/src/components/rate/Rate.test.tsx| Prop | Type | Required | Description |
|---|---|---|---|
value | number | No | value configures Rate. |
defaultValue | number | No | defaultValue configures Rate. |
onChange | (value: number) => void | No | onChange configures Rate. |
count | number | No | count configures Rate. |
allowHalf | boolean | No | allowHalf configures Rate. |
allowClear | boolean | No | allowClear configures Rate. |
disabled | boolean | No | disabled configures Rate. |
readOnly | boolean | No | readOnly configures Rate. |
character | RateCharacter | No | character configures Rate. |
tooltips | string[] | No | tooltips configures Rate. |
className | string | No | className configures Rate. |
size | RateSize | No | size configures Rate. |
color | RateColor | No | color configures Rate. |
| Prop | Type | Required | Description |
|---|---|---|---|
index | number | Yes | index configures Rate. |
value | number | Yes | value configures Rate. |
"sm" | "md" | "lg" | "xl"| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"ReactNode | ((info: RateCharacterRenderInfo) => ReactNode)