44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import ComponentCard from "../../common/ComponentCard";
|
|
import Radio from "../input/Radio";
|
|
|
|
export default function RadioButtons() {
|
|
const [selectedValue, setSelectedValue] = useState<string>("option2");
|
|
|
|
const handleRadioChange = (value: string) => {
|
|
setSelectedValue(value);
|
|
};
|
|
return (
|
|
<ComponentCard title="Radio Buttons">
|
|
<div className="flex flex-wrap items-center gap-8">
|
|
<Radio
|
|
id="radio1"
|
|
name="group1"
|
|
value="option1"
|
|
checked={selectedValue === "option1"}
|
|
onChange={handleRadioChange}
|
|
label="Default"
|
|
/>
|
|
<Radio
|
|
id="radio2"
|
|
name="group1"
|
|
value="option2"
|
|
checked={selectedValue === "option2"}
|
|
onChange={handleRadioChange}
|
|
label="Selected"
|
|
/>
|
|
<Radio
|
|
id="radio3"
|
|
name="group1"
|
|
value="option3"
|
|
checked={selectedValue === "option3"}
|
|
onChange={handleRadioChange}
|
|
label="Disabled"
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
</ComponentCard>
|
|
);
|
|
}
|