Actions and forms

Radio

Single native radio choice with supporting description.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Radio } from "@cofob/design-system-react";

/**
 * Complete Radio parameter reference.
 * @param checked/defaultChecked
 *   type: boolean; controlled or initial state
 *   default: —
 *   example: true
 * @param name
 *   type: string
 *   default: —
 *   example: "Ada Lovelace"
 * @param value
 *   type: string | number
 *   default: —
 *   example: "overview"
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Supporting context for this control."
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function RadioExample() {
  return (
    <Radio name="plan" value="pro" label="Pro" />
  );
}

Svelte

<script lang="ts">
  import { Radio } from "@cofob/design-system-svelte";

  // Complete Radio parameter reference.
  // checked/defaultChecked
  //   type: boolean; controlled or initial state
  //   default: —
  //   example: true
  // name
  //   type: string
  //   default: —
  //   example: "Ada Lovelace"
  // value
  //   type: string | number
  //   default: —
  //   example: "overview"
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Supporting context for this control."
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Radio name="plan" value="pro" label="Pro" bind:checked />

HTML

<!--
  Complete Radio parameter reference.
  checked/defaultChecked
    type: boolean; controlled or initial state
    default: —
    example: true
  name
    type: string
    default: —
    example: "Ada Lovelace"
  value
    type: string | number
    default: —
    example: "overview"
  label
    type: string | renderable content
    required
    example: "Accessible label"
  description
    type: string | renderable content
    default: —
    example: "Supporting context for this control."
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<label class="cf-radio"><input type="radio" name="plan" value="pro" /> Pro</label>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-radio`
Adapters	Native · React · Svelte
Primary props	checked/defaultChecked · name · value · label · description · size · input attributes
Documented states	unchecked · checked · focus-visible · disabled
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`checked/defaultChecked`	`boolean; controlled or initial state`	`—`	React · Svelte · HTML	`true`	Use checked/bind:checked for controlled state or defaultChecked for initial state.
`name`	`string`	`—`	React · Svelte · HTML	`"Ada Lovelace"`	Identifies a native form field or named entity, depending on the component.
`value`	`string \| number`	`—`	React · Svelte · HTML	`"overview"`	Selected or reported native value.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`description`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Supporting context for this control."`	Supporting explanatory content.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`input attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.