Radio Group

CombricDocumentation version

Native radio controls coordinated by a fieldset-backed group.

Import and usage

import { Radio, RadioGroup } from "@combric/react";

Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.

Examples

Radio group

Starter Pro

import { Label, Radio, RadioGroup } from "@combric/react";

export function Example() {
  return (
    <RadioGroup name="plan" defaultValue="starter" aria-label="Plan">
      <Label><Radio value="starter" /> Starter</Label>
      <Label><Radio value="pro" /> Pro</Label>
    </RadioGroup>
  );
}

Disabled group

Starter Pro

import { Label, Radio, RadioGroup } from "@combric/react";

export function Example() {
  return (
    <RadioGroup name="plan-disabled" defaultValue="starter" disabled aria-label="Plan">
      <Label><Radio value="starter" /> Starter</Label>
      <Label><Radio value="pro" /> Pro</Label>
    </RadioGroup>
  );
}

Required selection

Starter Pro

import { Label, Radio, RadioGroup } from "@combric/react";

export function Example() {
  return <RadioGroup name="required-plan" defaultValue="starter" required aria-label="Plan"><Label><Radio value="starter" /> Starter</Label><Label><Radio value="pro" /> Pro</Label></RadioGroup>;
}

Public API

Public exports
Name
`Radio`
`RadioGroup`

Documented contracts
Property / capability	Published contract
Contract	name
Contract	value/defaultValue
Contract	onValueChange
Contract	disabled/required

Accessibility

Uses native radio inputs and fieldset disabled propagation; provide a group label.

Keyboard

Native browser radio-group arrow and Space behavior.

CSS and customization

Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.

Source

View source on GitHub