> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio Button

> A radio button component for single selection from a group of options

export const RadioButtonSurveyFormPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonSurveyForm" frameBorder="0" width="100%" height="420"></iframe>;
};

export const RadioButtonPaymentMethodPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonPaymentMethod" frameBorder="0" width="100%" height="320"></iframe>;
};

export const RadioButtonGroupPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonGroupExample" frameBorder="0" width="100%" height="320"></iframe>;
};

export const RadioButtonFocusStatePreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonFocusState" frameBorder="0" width="100%" height="200"></iframe>;
};

export const RadioButtonErrorStatePreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonErrorState" frameBorder="0" width="100%" height="240"></iframe>;
};

export const RadioButtonDisabledStatePreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonDisabledState" frameBorder="0" width="100%" height="260"></iframe>;
};

export const RadioButtonBasicPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RadioButtonBasicExample" frameBorder="0" width="100%" height="280"></iframe>;
};

## Overview

The RadioButton component provides a radio input for single selection from a group of options, with support for labels, validation states, and error handling.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RadioButton } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      const [selected, setSelected] = useState("option1");

      return (
        <RadioButton
          checked={selected === "option1"}
          onCheckedChange={(checked) => checked && setSelected("option1")}
          label="Option 1"
          name="group"
          value="option1"
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonBasicPreview />
  </Tab>
</Tabs>

## Radio Group

### Basic Group

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RadioButton } from '@peppermint-design/devreadykit-custom';

    function RadioGroup() {
      const [selected, setSelected] = useState("option1");

      return (
        <div className="space-y-2">
          <RadioButton
            checked={selected === "option1"}
            onCheckedChange={(checked) => checked && setSelected("option1")}
            label="Option 1"
            name="group"
            value="option1"
          />
          <RadioButton
            checked={selected === "option2"}
            onCheckedChange={(checked) => checked && setSelected("option2")}
            label="Option 2"
            name="group"
            value="option2"
          />
          <RadioButton
            checked={selected === "option3"}
            onCheckedChange={(checked) => checked && setSelected("option3")}
            label="Option 3"
            name="group"
            value="option3"
          />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonGroupPreview />
  </Tab>
</Tabs>

## Visual States

### Focus

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <RadioButton 
      checked={false}
      label="Focused radio"
      visualState="focus"
      name="group"
      value="focus"
    />
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonFocusStatePreview />
  </Tab>
</Tabs>

### Error

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <RadioButton 
      checked={false}
      label="Error radio"
      visualState="error"
      errorMessage="This selection is required"
      name="group"
      value="error"
    />
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonErrorStatePreview />
  </Tab>
</Tabs>

### Disabled

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <RadioButton 
      checked={true}
      label="Disabled checked"
      visualState="disabled"
      name="group"
      value="disabled1"
    />
    <RadioButton 
      checked={false}
      label="Disabled unchecked"
      visualState="disabled"
      name="group"
      value="disabled2"
    />
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonDisabledStatePreview />
  </Tab>
</Tabs>

## Props

| Prop            | Type                                                                   | Default  | Description              |
| :-------------- | :--------------------------------------------------------------------- | :------- | :----------------------- |
| checked         | `boolean`                                                              | `false`  | Checked state            |
| onCheckedChange | `(checked: boolean, event: ChangeEvent) => void`                       | —        | Change handler           |
| visualState     | `"rest" \| "focus" \| "error" \| "disabled" \| "default" \| "focused"` | `"rest"` | Visual state             |
| label           | `React.ReactNode`                                                      | —        | Label content            |
| required        | `boolean`                                                              | `false`  | Required field indicator |
| errorMessage    | `React.ReactNode`                                                      | —        | Error message            |
| name            | `string`                                                               | —        | Name for radio group     |
| value           | `string`                                                               | —        | Value for radio button   |
| disabled        | `boolean`                                                              | `false`  | Disabled state           |
| className       | `string`                                                               | —        | Additional CSS classes   |

## Examples

### Survey Form

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState, type ChangeEvent } from "react";
    import { RadioButton } from '@peppermint-design/devreadykit-custom';

    function SurveyForm() {
      const [responses, setResponses] = useState({
        satisfaction: "",
        recommendation: "",
        experience: ""
      });

      const handleChange = (field: string) => (checked: boolean, event: ChangeEvent) => {
        if (checked) {
          setResponses(prev => ({ ...prev, [field]: event.target.value }));
        }
      };

      return (
        <form className="space-y-6">
          <div>
            <h3 className="font-medium mb-3">How satisfied are you?</h3>
            <div className="space-y-2">
              {["very-satisfied", "satisfied", "neutral", "dissatisfied", "very-dissatisfied"].map(value => (
                <RadioButton
                  key={value}
                  checked={responses.satisfaction === value}
                  onCheckedChange={handleChange('satisfaction')}
                  label={value.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                  name="satisfaction"
                  value={value}
                />
              ))}
            </div>
          </div>
        </form>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonSurveyFormPreview />
  </Tab>
</Tabs>

### Payment Method Selection

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RadioButton } from '@peppermint-design/devreadykit-custom';

    function PaymentMethod() {
      const [method, setMethod] = useState("credit-card");

      return (
        <div className="space-y-3">
          <h3 className="font-medium">Payment Method</h3>
          
          <RadioButton
            checked={method === "credit-card"}
            onCheckedChange={(checked) => checked && setMethod("credit-card")}
            label="Credit Card"
            name="payment"
            value="credit-card"
          />
          
          <RadioButton
            checked={method === "paypal"}
            onCheckedChange={(checked) => checked && setMethod("paypal")}
            label="PayPal"
            name="payment"
            value="paypal"
          />
          
          <RadioButton
            checked={method === "bank-transfer"}
            onCheckedChange={(checked) => checked && setMethod("bank-transfer")}
            label="Bank Transfer"
            name="payment"
            value="bank-transfer"
          />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RadioButtonPaymentMethodPreview />
  </Tab>
</Tabs>