Skip to content

Radio

Default radio

Show code
default.tsx
import { Radio } from "@hrc/input";
export function RadioDefault() {
return (
<>
<Radio label="Write a story" name="radio-default" value="write" />
<Radio
label="Read a story"
name="radio-default"
value="read"
defaultChecked
/>
</>
);
}

Colors

Use the color prop to change the color of the radio.

Show code
colors.tsx
import { Radio } from "@hrc/input";
const colors = [
"primary",
"secondary",
"error",
"info",
"warning",
"success",
] as const;
const toTitleCase = (str: string) => `${str[0].toUpperCase()}${str.slice(1)}`;
export function RadioColors() {
return colors.map((color) => (
<Radio
key={`radio-colors-${color}`}
name={`radio-colors-${color}`}
color={color}
label={`${toTitleCase(color)}`}
value={color}
defaultChecked
/>
));
}

Disabled

Add the disabled prop to disable the radio.

Show code
import { useState } from "react";
import { Radio } from "@hrc/input";
import { ToggleDisabled } from "./ToggleDisabled";
export function RadioDisabled() {
const [disabled, setDisabled] = useState(false);
return (
<>
<ToggleDisabled disabled={disabled} setter={setDisabled} />
<Radio
label="Write a story"
name="radio-disabled"
value="write"
disabled={disabled}
/>
<Radio
label="Read a story"
name="radio-disabled"
value="read"
disabled={disabled}
defaultChecked
/>
</>
);
}

Sizes

Set the size prop to change the size of the radio.

Show code
sizes.tsx
import { Radio } from "@hrc/input";
export function RadioSizes() {
return (
<>
<Radio label="Small" name="radio-size" value="small" size="small" />
<Radio label="Default" name="radio-size" value="default" defaultChecked />
<Radio label="Large" name="radio-size" value="large" size="large" />
</>
);
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <Radio />: