Radio

import { Radio } from "@brijbyte/agentic-ui/radio";
import { RadioGroupRoot } from "@brijbyte/agentic-ui/radio-group";
import "@brijbyte/agentic-ui/radio.css";
import "@brijbyte/agentic-ui/radio-group.css";

export default function HighLevelDemo() {
  return (
    <RadioGroupRoot defaultValue="staging" aria-label="Deployment target">
      <Radio value="production">Production</Radio>
      <Radio value="staging">Staging</Radio>
      <Radio value="preview">Preview</Radio>
      <Radio value="local" disabled>
        Local
      </Radio>
    </RadioGroupRoot>
  );
}

import { Radio, RadioRoot, RadioIndicator } from "@brijbyte/agentic-ui/radio";
import { RadioGroupRoot } from "@brijbyte/agentic-ui/radio-group";
import "@brijbyte/agentic-ui/radio.css";
import "@brijbyte/agentic-ui/radio-group.css";

export default function ComposedDemo() {
  return (
    // Raw RadioGroupRoot for full control (name, required, form integration)
    <RadioGroupRoot defaultValue="ssd" name="storage" aria-label="Storage type">
      <Radio value="ssd">SSD — fast, lower capacity</Radio>
      <Radio value="hdd">HDD — slower, higher capacity</Radio>
      {/* Composed manually for a custom layout */}
      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
      <label style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", cursor: "pointer" }}>
        <RadioRoot value="nvme">
          <RadioIndicator />
        </RadioRoot>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-primary)" }}>
          NVMe — fastest, premium
        </span>
      </label>
    </RadioGroupRoot>
  );
}