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="Required field" required />
      <Checkbox label="Pre-checked" defaultChecked />
      <Checkbox label="Partial" indeterminate />
      <Checkbox label="Disabled" disabled />
    </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 Groups() {
  return (
    <Stack direction="column" gap={24}>
      <CheckboxGroup
        label="Notifications"
        direction="column"
        gap={12}
        defaultValue={['email']}
        options={[
          { label: 'Email', value: 'email' },
          { label: 'Push', value: 'push' },
          { label: 'SMS', value: 'sms', disabled: true }
        ]}
      />
    </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 { CheckboxGroup, Badge, Stack, Text } from 'biibaos'
import { useState } from 'react'

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