Forms

Select

Native select with custom chevron arrow and consistent BiibaOS styling.

Basic Usage

Standard single-select dropdown. It automatically adapts to a bottom sheet on mobile devices for native-like UX.

Preferred Language

'use client'

import React from 'react'
import { Select } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', maxWidth: 400 }}>
          <Select
            label="Preferred Language"
            placeholder="Choose your primary language"
            options={[
              { label: 'English', value: 'en' },
              { label: 'Spanish', value: 'es' },
              { label: 'French', value: 'fr' },
              { label: 'German', value: 'de' },
            ]}
          />
        </div>
  )
}

Validation & States

Control the visual state and interactivity of the select component.

Required Field

Selection is required to proceed

Read-only

Information

Your data is encrypted and secure

'use client'

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

export default function App() {
  return (
    <Stack direction="column" gap={16} style={{ maxWidth: 400 }}>
          <Select 
            label="Required Field" 
            error="Selection is required to proceed" 
            options={[{ label: 'Option 1', value: '1' }]} 
          />
          <Select 
            label="Read-only" 
            disabled 
            defaultValue="fixed"
            options={[{ label: 'Fixed Value', value: 'fixed' }]} 
          />
          <Select 
            label="Information" 
            hint="Your data is encrypted and secure"
            options={[{ label: 'Private', value: 'p' }]} 
          />
        </Stack>
  )
}

Icons & Descriptions

Enhance options with icons and secondary descriptions to provide more context to the user.

Select Project Type

'use client'

import React from 'react'
import { Select, Icon } from 'biibaos'
import { Globe, Zap, LayoutGrid } from 'lucide-react'

export default function App() {
  return (
    <div style={{ width: '100%', maxWidth: 400 }}>
          <Select
            label="Select Project Type"
            defaultValue="web"
            options={[
              { 
                label: 'Web Application', 
                value: 'web', 
                icon: <Icon icon={Globe} size={14} />, 
                description: 'React, Next.js, or static sites' 
              },
              { 
                label: 'Mobile App', 
                value: 'mobile', 
                icon: <Icon icon={Zap} size={14} />, 
                description: 'iOS and Android native apps' 
              },
              { 
                label: 'Desktop Software', 
                value: 'desktop', 
                icon: <Icon icon={LayoutGrid} size={14} />, 
                description: 'macOS, Windows, and Linux' 
              },
            ]}
          />
        </div>
  )
}

Search & Multi-select

Enable searching for long lists and allow users to select multiple values with tag previews.

Searchable List

Multi-select with Tags

'use client'

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

export default function App() {
  return (
    <Stack direction="column" gap={16} style={{ maxWidth: 400 }}>
          <Select
            searchable
            label="Searchable List"
            placeholder="Filter countries..."
            options={[
              { label: 'United States', value: 'us' },
              { label: 'United Kingdom', value: 'uk' },
              { label: 'Canada', value: 'ca' },
              { label: 'Germany', value: 'de' },
              { label: 'France', value: 'fr' },
              { label: 'Japan', value: 'jp' },
            ]}
          />
          <Select
            multiple
            clearable
            label="Multi-select with Tags"
            defaultValue={['react', 'nextjs']}
            maxVisibleTags={3}
            options={[
              { label: 'React', value: 'react' },
              { label: 'Next.js', value: 'nextjs' },
              { label: 'TypeScript', value: 'ts' },
              { label: 'Framer Motion', value: 'fm' },
              { label: 'Tailwind CSS', value: 'tw' },
            ]}
          />
        </Stack>
  )
}

Sizes

Select heights are unified with Buttons and Inputs for perfect grid alignment.

'use client'

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

export default function App() {
  return (
    <Stack direction="column" gap={12} style={{ maxWidth: 400 }}>
          <Select size="xs" placeholder="Extra Small (24px)" options={[]} />
          <Select size="sm" placeholder="Small (32px)" options={[]} />
          <Select size="md" placeholder="Medium (36px)" options={[]} />
          <Select size="lg" placeholder="Large (44px)" options={[]} />
          <Select size="xl" placeholder="Extra Large (52px)" options={[]} />
        </Stack>
  )
}

Real-world: Workspace Access

An interactive workspace picker showing how to handle state and complex option objects.

Switch Project

Active Workspace:

BiibaOS

'use client'

import React, { useState } from 'react'
import { Select, Stack, Icon, Badge, View, Text } from 'biibaos'
import { LayoutGrid } from 'lucide-react'

export default function App() {
  const [val, setVal] = useState('biiba')
  
  return (
    <Stack direction="column" gap={16} style={{ width: '100%', maxWidth: 400 }}>
      <Select
        label="Switch Project"
        value={val}
        onChange={setVal}
        leftIcon={<Icon icon={LayoutGrid} size={16} />}
        options={[
          { 
            label: 'BiibaOS Design System', 
            value: 'biiba', 
            icon: <Badge variant="primary" dot />,
            description: 'Core component library'
          },
          { 
            label: 'Mobile App Pro', 
            value: 'mobile', 
            icon: <Badge variant="success" dot />,
            description: 'Customer-facing iOS/Android app'
          },
          { 
            label: 'Marketing Website', 
            value: 'web', 
            icon: <Badge variant="warning" dot />,
            description: 'Public landing pages'
          }
        ]}
      />
      <View p={16} bg="surface-raised" radius="md" border>
        <Text size={12} color="muted" style={{ marginBottom: 4 }}>Active Workspace:</Text>
        <Text weight="bold">{val === 'biiba' ? 'BiibaOS' : val === 'mobile' ? 'Mobile Pro' : 'Marketing'}</Text>
      </View>
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`options`	`SelectOption[]`	—	Array of option items containing value and label elements
`value`	`string \| string[]`	—	Raw data string or URL to encode into the QR grid
`defaultValue`	`string \| string[]`	—	Initial uncontrolled default value
`onChange`	`(value: any) => void`	—	Callback function triggered when the value changes
`placeholder`	`string`	'Select an option'	Ghost placeholder text displayed inside empty inputs
`label`	`string`	—	Primary text label description
`hint`	`string`	—	Supporting instructional guideline note
`error`	`string`	—	Validation error text message shown beneath
`disabled`	`boolean`	—	If true, disables all user interaction and applies faded opacity
`size`	`BiibaSize`	'md'	Predefined size scaling preset
`leftIcon`	`React.ReactNode`	—	Decorative prefix icon on the left edge
`maxHeight`	`number \| string`	300	Configures the maxHeight option
`fullWidth`	`boolean`	true	If true, stretches button to 100% of parent container
`searchable`	`boolean`	false	Configures the searchable option
`multiple`	`boolean`	false	If true, permits multiple selections or files
`clearable`	`boolean`	false	Configures the clearable option
`maxVisibleTags`	`number`	2	Configures the maxVisibleTags option

Textarea

Checkbox