Forms

Radio

Radio button with smooth selection animation.

Selection

Individual radio buttons for selecting a single option. Best used when there are 2-5 options to keep visible.

Free TrialPro MembershipEnterprise

'use client'

import React from 'react'
import { Radio, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={12}>
      <Radio name="plan" label="Free" value="free" />
      <Radio name="plan" label="Pro" value="pro" defaultChecked />
      <Radio name="plan" label="Enterprise" disabled />
    </Stack>
  )
}

Radio Group

The standard way to handle single selection from a list. Supports custom layout direction and spacing tokens.

'use client'

import React from 'react'
import { RadioGroup, Stack } from 'biibaos'

export default function Groups() {
  return (
    <Stack direction="column" gap={24}>
      <RadioGroup
        label="Billing"
        direction="row"
        gap={32}
        defaultValue="annual"
        options={[
          { label: 'Monthly', value: 'monthly' },
          { label: 'Annual', value: 'annual' }
        ]}
      />
    </Stack>
  )
}

Real-world: Account Switcher

An interactive, controlled example showing how to handle account type selection with live feedback.

Account Type

Personal AccountTeam WorkspaceEnterprise Organization

Active: PERSONAL

'use client'

import { RadioGroup, Badge, Stack } from 'biibaos'
import { useState } from 'react'

export default function AccountSwitcher() {
  const [account, setAccount] = useState('personal')
  
  return (
    <Stack direction="column" gap={16}>
      <RadioGroup
        label="Account Type"
        value={account}
        onChange={setAccount}
        options={[
          { label: 'Personal Account', value: 'personal' },
          { label: 'Team Workspace', value: 'team' },
          { label: 'Enterprise Organization', value: 'enterprise' },
        ]}
      />
      <Badge variant="primary" pulse={account === 'enterprise'} pill>
        Active: {account.toUpperCase()}
      </Badge>
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled Boolean checked state
`defaultChecked`	`boolean`	—	Initial uncontrolled checked state
`value`	`string`	—	Raw data string or URL to encode into the QR grid
`onChange`	`(value: string) => void`	—	Callback function triggered when the value changes
`label`	`string`	—	Primary text label description
`disabled`	`boolean`	—	If true, disables all user interaction and applies faded opacity
`name`	`string`	—	Form field name identifier for submissions
`options`	`{ label: string`	—	Array of option items containing value and label elements

Checkbox

Toggle