Radio
Radio buttons allow the user to select one option from a set.
Overview
Copy
import { Radio } from "@camome/core/Radio";
export default function Default() { return <Radio label="Label text" />;}
Group
Copy
import { Radio } from "@camome/core/Radio";import { RadioGroup } from "@camome/core/RadioGroup";
export default function Group() { return ( <RadioGroup label="Gundam kids" aria-required> <Radio label="Katz" name="gundam-kids-1" value="katz" defaultChecked /> <Radio label="Letz" name="gundam-kids-1" value="letz" /> <Radio label="Kikka" name="gundam-kids-1" value="kikka" /> </RadioGroup> );}
Sizes
Copy
import { Radio } from "@camome/core/Radio";import { RadioGroup } from "@camome/core/RadioGroup";
export default function Size() { return ( <RadioGroup label="Sizes" aria-required> <Radio label="Small" name="sizes" value="sm" size="sm" defaultChecked /> <Radio label="Medium" name="sizes" value="md" size="md" /> <Radio label="Large" name="sizes" value="lg" size="lg" /> </RadioGroup> );}
Horizontal Group
Copy
import { Radio } from "@camome/core/Radio";import { RadioGroup } from "@camome/core/RadioGroup";
export default function Horizontal() { return ( <RadioGroup label="Gundam kids" aria-required orientation="horizontal"> <Radio label="Katz" name="gundam-kids-3" value="katz" defaultChecked /> <Radio label="Letz" name="gundam-kids-3" value="letz" /> <Radio label="Kikka" name="gundam-kids-3" value="kikka" /> </RadioGroup> );}
Disabled
Copy
import { Radio } from "@camome/core/Radio";import { RadioGroup } from "@camome/core/RadioGroup";
export default function Disabled() { return ( <RadioGroup label="Disabled"> <Radio label="Checked" value="true" checked disabled /> <Radio label="Not checked" value="true" disabled /> </RadioGroup> );}
With helper text
Copy
import { Radio } from "@camome/core/Radio";import { RadioGroup } from "@camome/core/RadioGroup";
export default function HelperText() { return ( <RadioGroup label="Gundam kids" description="Choose your favorite" error="This field is required" > <Radio label="Katz" name="gundam-kids-4" value="katz" defaultChecked /> <Radio label="Letz" name="gundam-kids-4" value="letz" /> <Radio label="Kikka" name="gundam-kids-4" value="kikka" /> </RadioGroup> );}