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="basics-plan" label="Free Trial" value="free" />
          <Radio name="basics-plan" label="Pro Membership" value="pro" defaultChecked />
          <Radio name="basics-plan" label="Enterprise" value="ent" 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 App() {
  return (
    <Stack direction="column" gap={24}>
          <RadioGroup
            label="Billing Cycle (Row)"
            direction="row"
            gap={32}
            defaultValue="annual"
            options={[
              { label: 'Monthly', value: 'monthly' },
              { label: 'Annual (Save 20%)', value: 'annual' },
            ]}
          />
          
          <RadioGroup
            label="Project Status (Column)"
            direction="column"
            gap={14}
            defaultValue="active"
            options={[
              { label: 'Active Projects', value: 'active' },
              { label: 'Archived / Read-only', value: 'archived' },
              { label: 'Deleted Items', value: 'deleted', disabled: true },
            ]}
          />
        </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 React, { useState } from 'react'
import { RadioGroup, Stack, Badge } from 'biibaos'

export default function App() {
  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