hightouch

UI

Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Colors

Layout

BoxColumnRow

Typography

CodeHeadingParagraphSection HeadingText

Navigation

LinkLink Button

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Other

AvatarCode SnippetTabs

Upsells

Upsell BadgeUpsell ButtonUpsell CardUpsell DialogUpsell HeadingUpsell Success Dialog

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"
/>
<Radio
label="Second"
description="This is an extended description"
value="second"
/>
<Radio
label="Third"
description="This is an extended description"
value="third"
/>
</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

—

string | undefined

Selected radio value.

onChange

—

(value: string) => 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.

value

—

string

Radio value.

On this page