Radio Button

import { useState } from "react";
import { RadioButton } from '@peppermint-design/devreadykit';

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"
    />
  );
}

import { useState } from "react";
import { RadioButton } from '@peppermint-design/devreadykit';

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>
  );
}

<RadioButton 
  checked={false}
  label="Focused radio"
  visualState="focus"
  name="group"
  value="focus"
/>

<RadioButton 
  checked={false}
  label="Error radio"
  visualState="error"
  errorMessage="This selection is required"
  name="group"
  value="error"
/>

<RadioButton 
  checked={true}
  label="Disabled checked"
  visualState="disabled"
  name="group"
  value="disabled1"
/>
<RadioButton 
  checked={false}
  label="Disabled unchecked"
  visualState="disabled"
  name="group"
  value="disabled2"
/>

import { useState, type ChangeEvent } from "react";
import { RadioButton } from '@peppermint-design/devreadykit';

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>
  );
}

import { useState } from "react";
import { RadioButton } from '@peppermint-design/devreadykit';

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>
  );
}