Actions and forms

RadioGroup

Labelled single-selection group with validation and orientation.

Live example

Choose a plan

You can change this later.

StarterProFor growing projects.Enterprise

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 { RadioGroup } from "@cofob/design-system-react";

/**
 * Complete RadioGroup parameter reference.
 * @param value/defaultValue
 *   type: string or string[]; controlled or initial value
 *   default: —
 *   example: "overview"
 * @param name
 *   type: string
 *   required
 *   example: "Ada Lovelace"
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param options
 *   type: readonly { value; label; description?; disabled? }[]
 *   default: —
 *   example: {{ cols: 100, fit: "width" }}
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Supporting context for this control."
 * @param error
 *   type: string | renderable content
 *   default: —
 *   example: "Enter a valid value."
 * @param orientation
 *   type: "horizontal" | "vertical"
 *   default: "vertical"
 *   example: "horizontal"
 * @param disabled
 *   type: boolean
 *   default: false
 *   example: {disabled}
 * @param onValueChange
 *   type: (value: string) => void
 *   default: —
 *   example: {handleValueChange}
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param fieldset attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function RadioGroupExample() {
  return (
    <RadioGroup name="plan" label="Plan" options={plans} defaultValue="pro" />
  );
}

Svelte

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

  // Complete RadioGroup parameter reference.
  // value/defaultValue
  //   type: string or string[]; controlled or initial value
  //   default: —
  //   example: "overview"
  // name
  //   type: string
  //   required
  //   example: "Ada Lovelace"
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // options
  //   type: readonly { value; label; description?; disabled? }[]
  //   default: —
  //   example: {{ cols: 100, fit: "width" }}
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Supporting context for this control."
  // error
  //   type: string | renderable content
  //   default: —
  //   example: "Enter a valid value."
  // orientation
  //   type: "horizontal" | "vertical"
  //   default: "vertical"
  //   example: "horizontal"
  // disabled
  //   type: boolean
  //   default: false
  //   example: {disabled}
  // onValueChange
  //   type: (value: string) => void
  //   default: —
  //   example: {handleValueChange}
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // fieldset attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<RadioGroup name="plan" label="Plan" options={plans} bind:value />

HTML

<!--
  Complete RadioGroup parameter reference.
  value/defaultValue
    type: string or string[]; controlled or initial value
    default: —
    example: "overview"
  name
    type: string
    required
    example: "Ada Lovelace"
  label
    type: string | renderable content
    required
    example: "Accessible label"
  options
    type: readonly { value; label; description?; disabled? }[]
    default: —
    example: {{ cols: 100, fit: "width" }}
  description
    type: string | renderable content
    default: —
    example: "Supporting context for this control."
  error
    type: string | renderable content
    default: —
    example: "Enter a valid value."
  orientation
    type: "horizontal" | "vertical"
    default: "vertical"
    example: "horizontal"
  disabled
    type: boolean
    default: false
    example: {disabled}
  onValueChange
    type: (value: string) => void
    default: —
    example: {handleValueChange}
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  fieldset attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<fieldset class="cf-radio-group"><legend>Plan</legend>…</fieldset>

<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-group`
Adapters	Native · React · Svelte
Primary props	value/defaultValue · name · label · options · description · error · orientation · disabled · onValueChange · children · fieldset attributes
Documented states	vertical · horizontal · selected · error · 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
`value/defaultValue`	`string or string[]; controlled or initial value`	`—`	React · Svelte · HTML	`"overview"`	Use the first form for controlled state and the second for initial state.
`name`required	`string`	`required`	React · Svelte · HTML	`"Ada Lovelace"`	Identifies a native form field or named entity, depending on the component.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`options`	`readonly { value; label; description?; disabled? }[]`	`—`	React · Svelte · HTML	`{{ cols: 100, fit: "width" }}`	Component-specific choices or configuration options.
`description`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Supporting context for this control."`	Supporting explanatory content.
`error`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Enter a valid value."`	Validation message and invalid visual/ARIA state.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	React · Svelte · HTML	`"horizontal"`	Sets layout and the matching keyboard navigation axis or ARIA orientation.
`disabled`	`boolean`	`false`	React · Svelte · HTML	`{disabled}`	Prevents user interaction while preserving visible context.
`onValueChange`	`(value: string) => void`	`—`	React · Svelte · HTML	`{handleValueChange}`	Reports a user-driven tab or accordion value change.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`fieldset attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.