Forms

Checkbox

Animated checkbox with indeterminate state support.

Checkbox

Standard boolean toggle for forms and lists. Supports controlled and uncontrolled states, along with indeterminate logic.

'use client'

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

export default function App() {
  return (
    <Stack direction="column" gap={12}>
          <Checkbox label="Accept terms and conditions" required />
          <Checkbox label="Subscribe to newsletter" defaultChecked />
          <Checkbox label="Partial selection" indeterminate />
          <Checkbox label="System restricted" disabled defaultChecked />
          <Checkbox label="Custom ID Example" id="custom-cb-id" />
        </Stack>
  )
}

Checkbox Group

Manage a set of related options with shared state and layout control. Automatically handles layout direction and spacing.

'use client'

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

export default function App() {
  return (
    <Stack direction="column" gap={24}>
          <CheckboxGroup
            label="Notification Channels (Column)"
            direction="column"
            gap={12}
            options={[
              { label: 'Email alerts', value: 'email' },
              { label: 'Push notifications', value: 'push' },
              { label: 'SMS updates', value: 'sms', disabled: true },
            ]}
            defaultValue={['email']}
          />
          
          <CheckboxGroup
            label="Preferred Days (Row)"
            direction="row"
            gap={20}
            options={[
              { label: 'Mon', value: 'mon' },
              { label: 'Wed', value: 'wed' },
              { label: 'Fri', value: 'fri' },
            ]}
            defaultValue={['mon', 'fri']}
          />
        </Stack>
  )
}

Real-world: Permissions Manager

A controlled example showing how to manage complex state with a CheckboxGroup.

Project Permissions

Read AccessWrite AccessDelete AccessAdmin Access

readwrite

'use client'

import React, { useState } from 'react'
import { CheckboxGroup, Stack, Badge, Text } from 'biibaos'

export default function App() {
  const [perms, setPerms] = useState(['read', 'write'])
  return (
    <Stack direction="column" gap={16}>
      <CheckboxGroup
        label="Project Permissions"
        value={perms}
        onChange={setPerms}
        options={[
          { label: 'Read Access', value: 'read' },
          { label: 'Write Access', value: 'write' },
          { label: 'Delete Access', value: 'delete' },
          { label: 'Admin Access', value: 'admin', disabled: true },
        ]}
      />
      <Stack direction="row" gap={8} wrap>
        {perms.map(p => (
          <Badge key={p} variant="primary" size="xs" pill>{p}</Badge>
        ))}
        {perms.length === 0 && <Text variant="caption" color="muted">No permissions selected</Text>}
      </Stack>
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled Boolean checked state
`defaultChecked`	`boolean`	—	Initial uncontrolled checked state
`indeterminate`	`boolean`	—	Configures the indeterminate option
`onChange`	`(checked: boolean) => 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
`required`	`boolean`	—	Renders asterisk indicating a mandatory field
`id`	`string`	—	Unique HTML element identifier
`options`	`{ label: string`	—	Array of option items containing value and label elements
`value`	`string`	—	Raw data string or URL to encode into the QR grid

Select

Radio