Standard duskmoon implemented 8 demos

Radio

Radio captures one choice from a mutually exclusive set.

Import @duskmoon-dev/components/radio

4 API sections

8 documented props

5 behavior scenarios

Key API

colorsizeerrorloadinglabelPositiononChange

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

Radio is most often configured through `color`, `size`, `error`, `loading`.

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.

Colors

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function RadioColorsDemo() {
  return (<div style={{ display: "grid", gap: 8 }}>
  {colors.map((color) => (
    <Radio key={color} name={`radio-${color}`} color={color} defaultChecked>
      {color}
    </Radio>
  ))}
</div>);
}

Preview

DuskMoon Radio

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

export function Example() {
  return (<Radio
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>);
}

Preview

DuskMoon Radio

Renders with default classes

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

export function RadioRendersWithDefaultClassesDemo() {
  return (<Radio
  // Renders with default classes
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>);
}

Preview

DuskMoon Radio

Supports checked state

test-backed

Radio scenario from the component test coverage: supports checked state.

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

export function RadioSupportsCheckedStateDemo() {
  return (<Radio
  // Supports checked state
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>);
}

Preview

DuskMoon Radio

Calls native change handler

test-backed

Radio scenario from the component test coverage: calls native change handler.

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

export function RadioCallsNativeChangeHandlerDemo() {
  return (<Radio
  // Calls native change handler
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>);
}

Applies size, color, error, loading, and label position classes

test-backed

Radio scenario from the component test coverage: applies size, color, error, loading, and label position classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

export function RadioAppliesSizeColorErrorDemo() {
  return (<Radio
  // Applies size, color, error, loading, and label position classes
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>);
}

Preview

DuskMoon Radio

Forwards input ref

test-backed

Radio scenario from the component test coverage: forwards input ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Radio } from "@duskmoon-dev/components/radio";

export function RadioForwardsInputRefDemo() {
  return (<Radio
  // Forwards input ref
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>);
}

Preview

Sunshine Theme

DuskMoon Radio

Moonlight Theme

DuskMoon Radio

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">
  <Radio
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>
</div>

<div data-theme="moonlight">
  <Radio
  color="primary"
  onChange={(value) => console.log(value)}
>
  DuskMoon Radio
</Radio>
</div>

API

The API reference below lists every parsed exported type or interface for Radio. Start with `color`, `size`, `error`, `loading` for common usage.

Types: packages/components/src/components/radio/Radio.types.ts Scenarios: packages/components/src/components/radio/Radio.test.tsx

RadioProps interface extends Omit< ComponentProps<"input">, "children" | "className" | "size" | "type" >

Prop	Type	Required	Description
`color`	`RadioColor`	No	color configures Radio.
`size`	`RadioSize`	No	size configures Radio.
`error`	`boolean`	No	error configures Radio.
`loading`	`boolean`	No	loading configures Radio.
`labelPosition`	`RadioLabelPosition`	No	labelPosition configures Radio.
`className`	`string`	No	className configures Radio.
`children`	`ReactNode`	No	children configures Radio.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	No	onChange configures Radio.

RadioColor type

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

RadioSize type

"sm" | "md" | "lg"

RadioLabelPosition type

"left" | "right"