Standard duskmoon implemented 11 demos

Rate

Rate captures or displays simple rating values.

Import @duskmoon-dev/components/rate

5 API sections

15 documented props

8 behavior scenarios

Key API

valuedefaultValueonChangecountallowHalfallowClear

Usage

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

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Rate is most often configured through `value`, `defaultValue`, `onChange`, `count`.

Covered behavior

Renders with default classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

primary

★★★★★

secondary

★★★★★

tertiary

★★★★★

accent

★★★★★

neutral

★★★★★

base

★★★★★

info

★★★★★

success

★★★★★

warning

★★★★★

error

★★★★★

Colors

authored

Rate supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

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>);
}

Preview

★★★★★

Basic usage

authored

Import the component stylesheet and Rate from its package subpath, then render it with the core props.

Source

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"
/>);
}

Preview

★★★★★

Renders with default classes

test-backed

Rate scenario from the component test coverage: renders with default classes.

Source

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"
/>);
}

Preview

★★★★★

Supports custom count

test-backed

Rate scenario from the component test coverage: supports custom count.

Source

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"
/>);
}

Preview

★★★★★

Fills items from defaultValue

test-backed

Rate scenario from the component test coverage: fills items from defaultvalue.

Source

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"
/>);
}

Preview

★★★★★

Marks the half item when allowHalf is enabled

test-backed

Rate scenario from the component test coverage: marks the half item when allowhalf is enabled.

Source

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"
/>);
}

Preview

★★★★★

Applies disabled class

test-backed

Rate scenario from the component test coverage: applies disabled class.

Source

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"
/>);
}

Preview

★★★★★

Calls onChange with clicked value

test-backed

Rate scenario from the component test coverage: calls onchange with clicked value.

Source

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"
/>);
}

Preview

★★★★★

Clears when allowClear is enabled and current value is clicked

test-backed

Rate scenario from the component test coverage: clears when allowclear is enabled and current value is clicked.

Source

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"
/>);
}

Preview

★★★★★

Applies custom className

test-backed

Rate scenario from the component test coverage: applies custom classname.

Source

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"
/>);
}

Preview

Sunshine Theme

★★★★★

Moonlight Theme

★★★★★

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

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

Types: packages/components/src/components/rate/Rate.types.ts Scenarios: packages/components/src/components/rate/Rate.test.tsx

RateProps interface extends Omit< ComponentProps<"div">, "children" | "className" | "color" | "defaultValue" | "onChange" >

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.

RateCharacterRenderInfo interface

Prop	Type	Required	Description
`index`	`number`	Yes	index configures Rate.
`value`	`number`	Yes	value configures Rate.

RateSize type

"sm" | "md" | "lg" | "xl"

RateColor type

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

RateCharacter type

| ReactNode | ((info: RateCharacterRenderInfo) => ReactNode)