SOROUSH.DESIGN
v1.3.4
Design SystemMarkdownStyled System

Radio

A single-selection control for use within a group. Supports controlled checked state, six semantic color palettes, two sizes, and custom icons.

Architecture: the root element is a <label> wrapping a visually-hidden <input type="radio">, an icon span, and optional label text. Clicking anywhere on the root (icon or text) selects the radio. The native input handles all browser behaviour, form submission, and accessibility. Group exclusivity is enforced by the browser via a shared name prop.

Examples

Default

<Radio color="default" size="md" />

Checked

const args: Partial<RadioProps> = { checked: true, color: 'primary' }

<Radio {...args} onChange={() => {}} />

With Label

<Radio color="primary">Option A</Radio>

States

Unchecked
Checked
Disabled unchecked
Disabled checked
<Flex flexDirection="column" gap={2}>
  {(
    [
      { label: 'Unchecked', props: {} },
      { label: 'Checked', props: { checked: true, onChange: () => {} } },
      { label: 'Disabled unchecked', props: { disabled: true } },
      {
        label: 'Disabled checked',
        props: { disabled: true, checked: true, onChange: () => {} },
      },
    ] as const
  ).map(({ label, props }) => (
    <Flex key={label} flexDirection="row" alignItems="center" gap={2}>
      <Typography variant="caption" color="secondary" width="10rem" flexShrink={0} m={0}>
        {label}
      </Typography>
      <Radio color="primary" {...props} />
    </Flex>
  ))}
</Flex>

Colors

default
primary
secondary
success
error
info
warning
<ColorSwatchRows
  controls={(color) => (
    <>
      <Radio color={color} />
      <Radio color={color} checked onChange={() => {}} />
    </>
  )}
/>

Sizes

sm
md
lg
<Flex flexDirection="row" gap={4} alignItems="center">
  {(['sm', 'md', 'lg'] as const).map((size) => (
    <Flex key={size} flexDirection="column" alignItems="center" gap={1}>
      <Radio size={size} color="primary" checked onChange={() => {}} />
      <Typography variant="caption" color="secondary" m={0}>
        {size}
      </Typography>
    </Flex>
  ))}
</Flex>

Custom Icons

<Flex flexDirection="column" gap={2}>
  <Radio
    color="primary"
    icon={<span style={{ fontSize: '1.2em' }}>○</span>}
    checkedIcon={<span style={{ fontSize: '1.2em' }}>●</span>}
  >
    Custom icons (unchecked)
  </Radio>
  <Radio
    color="primary"
    checked
    onChange={() => {}}
    icon={<span style={{ fontSize: '1.2em' }}>○</span>}
    checkedIcon={<span style={{ fontSize: '1.2em' }}>●</span>}
  >
    Custom icons (checked)
  </Radio>
</Flex>

Radio API reference