hightouch UI

Radio

Radio group displays a set of options and allows user to select only one.

#

This is an extended description

This is an extended description

This is an extended description

import { RadioGroup, Radio } from "@hightouchio/ui";

function Example() {
const [value, setValue] = React.useState("first");

return (
<RadioGroup value={value} onChange={setValue}>
<Radio
label="First"
description="This is an extended description"
value="first"
tooltip={{
message: "This is a tooltip",
}}
/>
<Radio
label="Second"
description="This is an extended description"
value={2}
/>
<Radio
label="Third"
description="This is an extended description"
value={{ valueCanBeOfAnyType: true, excellent: "yes" }}
/>
</RadioGroup>
);
}

#

#

RadioGroup automatically positions radios horizontally, if there are no more than 3 radios and none of them have descriptions.

function Example() {
const [value, setValue] = React.useState("first");

return (
<RadioGroup value={value} onChange={setValue}>
<Radio label="First" value="first" />
<Radio label="Second" value="second" />
<Radio label="Third" value="third" />
</RadioGroup>
);
}

#

function Example() {
const [value, setValue] = React.useState("first");

return (
<RadioGroup value={value} onChange={setValue}>
<Radio label="First" value="first" />
<Radio label="Second" value="second" />
<Radio label="Third" value="third" />
<Radio label="Fourth" value="fourth" />
<Radio label="Fifth" value="fifth" />
</RadioGroup>
);
}

#

Most common

This is an extended description

This is an extended description

This is an extended description

import { RadioGroup, Radio, Badge } from "@hightouchio/ui";

function Example() {
const [value, setValue] = React.useState("first");

return (
<RadioGroup value={value} onChange={setValue}>
<Radio
label="First"
badge={<Badge>Most common</Badge>}
description="This is an extended description"
value="first"
/>
<Radio
label="Second"
description="This is an extended description"
value="second"
/>
<Radio
label="Third"
description="This is an extended description"
value="third"
/>
</RadioGroup>
);
}

#

#

NameDefaultDescription
isDisabledfalseboolean

Determines if all radios are disabled.

children

—

ReactNode

Radio inputs.

orientation"horizontal""horizontal" | "vertical"

Orientation.

value

—

T

Selected radio value.

onChange

—

(value: T) => void

Callback for when user selects a different radio option.

#

NameDefaultDescription
isDisabled

—

boolean

Determines if radio is disabled.

label

—

string

Label to show near the radio.

badge

—

ReactNode

Badge to display near the label.

description

—

ReactNode

Description to show below the label.

tooltip

—

Omit<TooltipProps, "children">

Tooltip to display when hovering over the radio. These props are passed to the tooltip component.

value

—

T

Radio value.

On this page