Forms

Toggle

iOS-style on/off switch in two sizes.

System Switches

Interactive switches for boolean settings. Features smooth spring animations and haptic feedback on touch devices.

Allow notifications

Dark mode

Biometric authentication

'use client'

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

export default function App() {
  return (
    <Stack direction="column" gap={16}>
      <Toggle label="Notifications" defaultChecked />
      <Toggle label="Dark mode" />
      <Toggle label="Biometrics" disabled />
    </Stack>
  )
}

Label Positioning

Place labels on the left or right of the switch to match your layout requirements.

Left Positioned Label

Right Positioned (Default)

'use client'

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

export default function Positioning() {
  return (
    <Stack direction="column" gap={12}>
      <Toggle label="Left" labelPosition="left" />
      <Toggle label="Right" labelPosition="right" />
    </Stack>
  )
}

Visual Scales

Standard and small sizes for different interface densities.

Medium (Default)

Small

'use client'

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

export default function Sizes() {
  return (
    <Stack direction="column" gap={14}>
      <Toggle size="md" label="Medium" />
      <Toggle size="sm" label="Small" />
    </Stack>
  )
}

Real-world: Focus Mode

A high-fidelity example showing how to use Toggle to control complex UI states.

Enable Focus Mode

'use client'

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

export default function FocusMode() {
  const [focus, setFocus] = useState(false)
  
  return (
    <Stack direction="column" gap={16}>
      <Toggle 
        label="Enable Focus Mode" 
        checked={focus} 
        onChange={setFocus} 
      />
      {focus && (
        <Badge variant="warning" pulse>
          Focus Mode Active: Silencing Alerts
        </Badge>
      )}
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled Boolean checked state
`defaultChecked`	`boolean`	—	Initial uncontrolled checked state
`onChange`	`(checked: boolean) => void`	—	Callback function triggered when the value changes
`label`	`string`	—	Primary text label description
`labelPosition`	`'left' \| 'right'`	—	Configures the labelPosition option
`disabled`	`boolean`	—	If true, disables all user interaction and applies faded opacity
`size`	`'sm' \| 'md'`	—	Predefined size scaling preset
`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

Radio

Slider