Radio

Controlled radio button. Group multiple Radio components sharing the same name.

Radio group

MonthlyAnnualLifetime

import { useState } from 'react'
import { Radio } from '@canarist/ui'

function PlanSelector() {
  const [plan, setPlan] = useState('monthly')
  return (
    <>
      <Radio
        name="plan"
        label="Monthly"
        value="monthly"
        checked={plan === 'monthly'}
        onChange={() => setPlan('monthly')}
      />
      <Radio
        name="plan"
        label="Annual"
        value="annual"
        checked={plan === 'annual'}
        onChange={() => setPlan('annual')}
      />
    </>
  )
}

With description

AdminFull access to all settings and user management.ViewerRead-only access. Cannot modify settings.

<Radio
  name="role"
  label="Admin"
  description="Full access to all settings."
  value="admin"
  checked={role === 'admin'}
  onChange={() => setRole('admin')}
/>

Reference

Prop	Type	Default	Description
label	string	—	Visible label next to the radio button.
description	string	—	Secondary text below the label.
name	string	—	HTML name attribute — groups radios together.
value	string	—	HTML value attribute.
checked	boolean	—	Controlled checked state.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	Called when this radio is selected.
disabled	boolean	—	Disable the radio.