Skip to main content
components

Radiobox

A styled radio input wrapped in a label, composing native radio semantics with accessible disabled and checked states.

Package@g4rcez/componentsSectionForm Controls

Examples

Basic Radio Group

Group Radiobox components with the same name to form a mutually exclusive selection.

Basic group
Notification preference
tsx
import { Radiobox } from "@g4rcez/components";

function BasicRadioGroup() {
  return (
    <fieldset className="flex flex-col gap-3">
      <legend className="text-sm font-medium mb-2">Notification preference</legend>
      <Radiobox name="notifications" value="email" defaultChecked>Email</Radiobox>
      <Radiobox name="notifications" value="sms">SMS</Radiobox>
      <Radiobox name="notifications" value="push">Push notification</Radiobox>
    </fieldset>
  );
}

Controlled Selection

Track the selected value with useState and pass checked to each option.

Controlled
Billing cycle — selected: monthly
tsx
"use client";
import { useState } from "react";
import { Radiobox } from "@g4rcez/components";

function ControlledRadio() {
  const [selected, setSelected] = useState("monthly");
  return (
    <fieldset className="flex flex-col gap-3">
      <legend className="text-sm font-medium mb-2">
        Billing cycle — selected: {selected}
      </legend>
      {["monthly", "quarterly", "annually"].map((plan) => (
        <Radiobox
          key={plan}
          name="billing"
          value={plan}
          checked={selected === plan}
          onChange={() => setSelected(plan)}
        >
          {plan.charAt(0).toUpperCase() + plan.slice(1)}
        </Radiobox>
      ))}
    </fieldset>
  );
}

Disabled State

Pass disabled to prevent interaction. The label cursor changes to not-allowed.

Disabled
Plan tier
tsx
import { Radiobox } from "@g4rcez/components";

function DisabledRadio() {
  return (
    <fieldset className="flex flex-col gap-3">
      <legend className="text-sm font-medium mb-2">Plan tier</legend>
      <Radiobox name="tier" value="free" defaultChecked>Free</Radiobox>
      <Radiobox name="tier" value="pro" disabled>Pro (unavailable)</Radiobox>
      <Radiobox name="tier" value="enterprise" disabled>Enterprise (unavailable)</Radiobox>
    </fieldset>
  );
}

When to use Radiobox

Use when

You need the documented Radiobox interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Radiobox behavior you need.

Accessibility

Keep the Radiobox labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.