Radio

Radio buttons allow the user to select one option from a set.

📦1.94 KB

Overview

import { Radio } from "@camome/core/Radio";
export default function Default() {
return <Radio label="Label text" />;
}

Group

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

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

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

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

Choose your favorite
This field is required
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>
);
}