Radio

RadioGroup holds a set of Radio options. Use it when there are a few options and it helps to see them all; for more than five or so, use Select.

import { Radio, RadioGroup } from '@beyul/sulmu-ui'

Source · Figma

Examples

Vertical

Low

Medium

High

import { Radio, RadioGroup } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <RadioGroup aria-label="Priority" defaultValue="low">
      <Radio value="low">Low</Radio>
      <Radio value="medium">Medium</Radio>
      <Radio value="high">High</Radio>
    </RadioGroup>
  )
}

Horizontal, with a disabled option

Internal

External

Partner (disabled)

import { Radio, RadioGroup } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <RadioGroup aria-label="Kind" defaultValue="internal" orientation="horizontal">
      <Radio value="internal">Internal</Radio>
      <Radio value="external">External</Radio>
      <Radio value="partner" disabled>
        Partner (disabled)
      </Radio>
    </RadioGroup>
  )
}

Controlled

Low

Medium

High

Priority: medium

import { Radio, RadioGroup, Stack, Text } from '@beyul/sulmu-ui'
import { useState } from 'react'

export default function Example() {
  const [value, setValue] = useState<string | null>('medium')
  return (
    <Stack gap={3}>
      <RadioGroup
        aria-label="Priority"
        orientation="horizontal"
        value={value}
        onValueChange={(d) => setValue(d.value)}
      >
        <Radio value="low">Low</Radio>
        <Radio value="medium">Medium</Radio>
        <Radio value="high">High</Radio>
      </RadioGroup>
      <Text textStyle="caption" tone="subtle">
        Priority: {value}
      </Text>
    </Stack>
  )
}

Props

RadioGroup

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	vertical	Stack the options (vertical, default) or lay them out in a row (horizontal).
defaultValue	string | null	-	The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
value	string | null	-	The controlled value of the radio group
name	string	-	The name of the input fields in the radio (Useful for form submission).
disabled	boolean	-	If true, the radio group will be disabled
onValueChange	((details: ValueChangeDetails) => void)	-	Function called once a radio is checked

Radio

Prop	Type	Default	Description
value	string | null	-	The controlled value of the radio group
disabled	boolean	-	If true, the radio group will be disabled

The remaining props of Ark UI’s RadioGroup parts are accepted too.

Accessibility and usage

• Give the group a name for assistive tech: an aria-label, or a Field label.
• Arrow keys move the selection inside the group; Tab moves in and out of it.
• Set name on the group to submit the selected value with a native form.