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 (
    <Select
      label="Language"
      options={[
        { label: 'English', value: 'en' },
        { label: 'Spanish', value: 'es' }
      ]}
    />
  )
}

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 States() {
  return (
    <Stack direction="column" gap={16} style={{ maxWidth: 400 }}>
      <Select label="Error" error="Message" options={[]} />
      <Select label="Disabled" disabled options={[]} />
    </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 } from 'lucide-react'

const options = [
  { 
    label: 'Web App', 
    value: 'web', 
    icon: <Icon icon={Globe} size={14} />, 
    description: 'Next.js or static sites' 
  }
]

export default function RichSelect() {
  return <Select label="Type" options={options} />
}

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 AdvancedSelect() {
  return (
    <Stack direction="column" gap={16} style={{ maxWidth: 400 }}>
      <Select searchable label="Search" options={[]} />
      <Select multiple clearable maxVisibleTags={3} options={[]} />
    </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 Sizes() {
  return (
    <Stack direction="column" gap={12} style={{ maxWidth: 400 }}>
      <Select size="sm" options={[]} />
      <Select size="lg" 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 { Select, Badge, Stack, View, Text, Icon } from 'biibaos'
import { LayoutGrid } from 'lucide-react'
import { useState } from 'react'

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