Docs
Components
Team
Storybook
Overview
Form
Button
Textbox
Textarea
Dropdown
Radio
Checkbox
Stepper
Toggle
Slider
Date Picker
Color Picker
Uploader
Pagination
Progress Bar
Search
Select
Label
Layout
Theme
Radio

Radio

Radio component allows users to select a single option from a group.

Examples

Default Use RadioGroup with an options array to create a group of radio buttons. Only one option can be selected at a time.

Show Code
1import { RadioGroup } from '@devup-ui/components'
2
3export default function Default() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            options={[
8                { value: 'option1', label: 'Option 1' },
9                { value: 'option2', label: 'Option 2' },
10                { value: 'option3', label: 'Option 3' },
11            ]}
12        />
13    )
14}
15
1import { RadioGroup } from '@devup-ui/components'
2
3export default function Default() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            options={[
8                { value: 'option1', label: 'Option 1' },
9                { value: 'option2', label: 'Option 2' },
10                { value: 'option3', label: 'Option 3' },
11            ]}
12        />
13    )
14}
15

Variant Use variant="button" to display radio options as a segmented button group. Options are displayed inline with connected borders.

Show Code
1import { RadioGroup } from '@devup-ui/components'
2
3export default function ButtonVariant() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            options={[
8                { value: 'option1', label: 'Option 1' },
9                { value: 'option2', label: 'Option 2' },
10                { value: 'option3', label: 'Option 3' },
11            ]}
12            variant="button"
13        />
14    )
15}
16
1import { RadioGroup } from '@devup-ui/components'
2
3export default function ButtonVariant() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            options={[
8                { value: 'option1', label: 'Option 1' },
9                { value: 'option2', label: 'Option 2' },
10                { value: 'option3', label: 'Option 3' },
11            ]}
12            variant="button"
13        />
14    )
15}
16

Direction Use direction="column" to stack radio buttons vertically. Default direction is "row" which displays options horizontally.

Show Code
1import { RadioGroup } from '@devup-ui/components'
2
3export default function Column() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            direction="column"
8            options={[
9                { value: 'option1', label: 'Option 1' },
10                { value: 'option2', label: 'Option 2' },
11                { value: 'option3', label: 'Option 3' },
12            ]}
13        />
14    )
15}
16
1import { RadioGroup } from '@devup-ui/components'
2
3export default function Column() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            direction="column"
8            options={[
9                { value: 'option1', label: 'Option 1' },
10                { value: 'option2', label: 'Option 2' },
11                { value: 'option3', label: 'Option 3' },
12            ]}
13        />
14    )
15}
16

Disabled Use disabled prop to prevent user interaction with all radio options. All radios will have a muted appearance and cannot be selected.

Show Code
1import { RadioGroup } from '@devup-ui/components'
2
3export default function Disabled() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            disabled
8            options={[
9                { value: 'option1', label: 'Option 1' },
10                { value: 'option2', label: 'Option 2' },
11                { value: 'option3', label: 'Option 3' },
12            ]}
13        />
14    )
15}
16
1import { RadioGroup } from '@devup-ui/components'
2
3export default function Disabled() {
4    return (
5        <RadioGroup
6            defaultValue="option1"
7            disabled
8            options={[
9                { value: 'option1', label: 'Option 1' },
10                { value: 'option2', label: 'Option 2' },
11                { value: 'option3', label: 'Option 3' },
12            ]}
13        />
14    )
15}
16
API

Radio props extends the input HTML attributes (except type).

PropdescriptionTypeDefault
children

The label content of the radio

React.ReactNode

undefined

checked

Whether the radio is checked

boolean

undefined

disabled

Whether the radio is disabled

boolean

false

variant

The visual variant of the radio

'default' | 'button'

'default'

firstButton

Whether this is the first button in a button group (only for button variant)

boolean

undefined

lastButton

Whether this is the last button in a button group (only for button variant)

boolean

undefined

classNames

Custom class names for inner elements

{
label?: string
}

undefined

styles

Custom inline styles for inner elements

{
label?: React.CSSProperties
}

undefined

colors

Custom color variables for the radio

{
primary?: string
border?: string
text?: string
bg?: string
hoverBg?: string
hoverBorder?: string
hoverColor?: string
checkedBg?: string
checkedBorder?: string
checkedColor?: string
disabledBg?: string
disabledColor?: string
}

undefined

RadioGroup API

RadioGroup component for managing a group of radio buttons.

PropdescriptionTypeDefault
options

Array of options for the radio group

{ value: string | number | boolean; label: React.ReactNode }[]

value

The controlled value of the radio group

string | number | boolean

undefined

defaultValue

The default value of the radio group (uncontrolled)

string | number | boolean

undefined

onChange

Callback when the selected value changes

(value: string | number | boolean) => void

undefined

disabled

Whether all radios in the group are disabled

boolean

false

direction

The layout direction of the radio group

'row' | 'column'

'row'

variant

The visual variant of the radio buttons

'default' | 'button'

'default'

colors

Custom color variables (same as Radio colors)

RadioColors

undefined

classNames

Custom class names for inner elements

{
label?: string
container?: string
}

undefined

styles

Custom inline styles for inner elements

{
label?: React.CSSProperties
container?: React.CSSProperties
}

undefined

Contents
Edit this page