Basic Implementation
To start using the radio buttons, you need to put it inside a form provider.
basic-component.tsx
import { useState } from "react";
import { Form, Radio, Button, type FormValues } from "cloth-ui";
export const BasicComponent = () => {
const [value, setValue] = useState("");
const handleSubmit = (data: FormValues) => {
setValue(data["settings"].toString()):
};
return (
<Form
id="myForm"
submit={handleSubmit}
>
<Radio
id="setting1"
label="Use default settings"
value="default"
name="settings"
/>
<Radio
id="setting2"
label="Use custom settings"
value="custom"
name="settings"
/>
<Button variant="secondary" text="Submit" buttonType="submit" />
{value && <span> You selected: {value} </span>}
</Form>
);
};
Disabled Radio Buttons
Radio Buttons can be disabled to avoid selecting them.
disabled-component.tsx
import { useState } from "react";
import { Form, Radio, Button, type FormValues } from "cloth-ui";
export const DisabledComponent = () => {
const [value, setValue] = useState("");
const handleSubmit = (data: FormValues) => {
setValue(data["settings"].toString()):
};
return (
<Form
id="myForm"
submit={handleSubmit}
>
<Radio
id="setting1"
label="Use default settings"
value="default"
name="settings"
/>
<Radio
id="setting2"
label="Use recommended settings"
value="recommended"
name="settings"
/>
<Radio
id="setting3"
label="Use custom settings"
value="custom"
name="settings"
disabled
/>
<Button variant="secondary" text="Submit" buttonType="submit" />
{value && <span> You selected: {value} </span>}
</Form>
);
};