Select Input

A form input component that combines the styling and features of a text input with dropdown selection functionality. Displays as an input field that opens a selector dropdown when clicked.

Basic Usage

import { SelectInput } from '@/components'
import { Selector } from '@/components'

const [value, setValue] = useState('')

<SelectInput
  placeholder="Select a department..."
  value={value}
  onValueChange={setValue}
>
  <Selector.Content>
    <Selector.Search placeholder="Search..." />
    <Selector.Item value="design">Design</Selector.Item>
    <Selector.Item value="development">Development</Selector.Item>
    <Selector.Item value="marketing">Marketing</Selector.Item>
  </Selector.Content>
</SelectInput>

With Label and Hint

Add a label and helper text to guide users.

<SelectInput
  label="Department"
  hint="Select the department you work in"
  placeholder="Select a department..."
  value={value}
  onValueChange={setValue}
>
  <Selector.Content>
    <Selector.Search placeholder="Search..." />
    <Selector.Item value="design">Design</Selector.Item>
    <Selector.Item value="development">Development</Selector.Item>
  </Selector.Content>
</SelectInput>

Department

Select the department you work in

Required Field

Use the required prop to show a required indicator (blue asterisk). Add showInfoIcon and tooltip for additional context.

<SelectInput
  label="Department"
  hint="This is a hint text to help users."
  placeholder="Select a department..."
  value={value}
  onValueChange={setValue}
  required
  showInfoIcon
  tooltip="Select your primary department"
>
  <Selector.Content>
    ...
  </Selector.Content>
</SelectInput>

Department

This is a hint text to help users.

Optional Field

Use showOptionalBadge to indicate optional fields.

<SelectInput
  label="Secondary Department"
  hint="You can optionally select a secondary department"
  placeholder="Select a department..."
  value={value}
  onValueChange={setValue}
  showOptionalBadge
  showInfoIcon
>
  <Selector.Content>
    ...
  </Selector.Content>
</SelectInput>

Secondary Department(Optional)

You can optionally select a secondary department

Sizes

The input comes in three sizes: small (36px), medium (40px, default), and large (44px).

Small (36px)

Department

Medium (40px) - Default

Department

Large (44px)

Department

Small

<SelectInput size="sm" label="Department" placeholder="Select..." ... />

Medium (Default)

<SelectInput size="md" label="Department" placeholder="Select..." ... />

Large

<SelectInput size="lg" label="Department" placeholder="Select..." ... />

States

The input has multiple visual states: Default (idle), Filled, Error, and Disabled.

Default (Idle)

Department

Filled

Department

Error

Department

Please select a department

Disabled

Department

With Left Icon

Add an icon to the left side of the input for visual context.

import { User } from 'iconoir-react'

<SelectInput
  label="Select User"
  hint="Choose a team member"
  placeholder="Select a user..."
  value={value}
  onValueChange={setValue}
  leftIcon={<User className="size-5" />}
>
  <Selector.Content>
    <Selector.Search placeholder="Search users..." />
    <Selector.Item value="john" variant="user" secondaryText="@johndoe">
      John Doe
    </Selector.Item>
    ...
  </Selector.Content>
</SelectInput>

Select User

Choose a team member

Multi-Select

Enable multi-selection mode with the multiple and showCheck props.

const [value, setValue] = useState<string[]>([])

const selectedLabels = value
  .map(v => options.find(o => o.value === v)?.label)
  .filter(Boolean)
  .join(', ')

<SelectInput
  label="Departments"
  hint="Select multiple departments"
  placeholder="Select departments..."
  value={value}
  onValueChange={setValue}
  multiple
  showCheck
  displayValue={selectedLabels || undefined}
>
  <Selector.Content>
    <Selector.Search placeholder="Search..." />
    <Selector.Item value="design">Design</Selector.Item>
    <Selector.Item value="development">Development</Selector.Item>
    <Selector.Item value="marketing">Marketing</Selector.Item>
  </Selector.Content>
</SelectInput>

Departments

Select multiple departments

With Add Button

Allow users to add new options using Selector.AddButton.

<SelectInput
  label="Department"
  hint="You can add new departments"
  placeholder="Select a department..."
  value={value}
  onValueChange={setValue}
>
  <Selector.Content>
    <Selector.Search placeholder="Search..." />
    {options.map(opt => (
      <Selector.Item key={opt.value} value={opt.value}>
        {opt.label}
      </Selector.Item>
    ))}
    <Selector.AddButton onClick={handleAdd}>Add new department</Selector.AddButton>
  </Selector.Content>
</SelectInput>

Department

You can add new departments

Controlled Component

Control the input value externally and display the selected label.

const [value, setValue] = useState('')
const selectedLabel = options.find(o => o.value === value)?.label

<SelectInput
  label="Department"
  hint={`Selected: ${selectedLabel || 'None'}`}
  placeholder="Select a department..."
  value={value}
  onValueChange={setValue}
  displayValue={selectedLabel}
  required
>
  <Selector.Content>
    ...
  </Selector.Content>
</SelectInput>

Department

Selected: None

Country Selection Example

Example showing country selection with an icon.

Country

Select your country

All States Overview

Idle

Filled

Error

Disabled

Accessibility

Labels are properly associated with the trigger via htmlFor/id
aria-describedby connects hint/error text to the input
aria-invalid is set when in error state
aria-required is set for required fields
Full keyboard navigation support for the dropdown
Trigger button is focusable and activates with Enter/Space

API Reference

SelectInput Props

Prop	Type	Default	Description
label	`string`	-	Label text above the input
hint	`string`	-	Hint text below the input
error	`boolean \| string`	`false`	Error state or error message
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size variant
required	`boolean`	`false`	Mark as required (shows asterisk)
disabled	`boolean`	`false`	Disable the input
showOptionalBadge	`boolean`	`false`	Show "(Optional)" badge
showInfoIcon	`boolean`	`false`	Show info icon in label
tooltip	`string`	-	Tooltip text for info icon
leftIcon	`ReactNode`	-	Icon to show on the left
placeholder	`string`	`'Select an option...'`	Placeholder text
value	`string \| string[]`	-	Controlled value
defaultValue	`string \| string[]`	-	Default value (uncontrolled)
onValueChange	`(value: string \| string[]) => void`	-	Callback when value changes
multiple	`boolean`	`false`	Enable multi-selection
showCheck	`boolean`	`false`	Show checkmarks on selected items
open	`boolean`	-	Controlled open state
defaultOpen	`boolean`	`false`	Default open state
onOpenChange	`(open: boolean) => void`	-	Callback when open state changes
displayValue	`string`	-	Custom display text for selected value
children	`ReactNode`	-	Selector.Content with items

Styling Props

Prop	Type	Description
containerClassName	`string`	Class for the root container
labelClassName	`string`	Class for the label
fieldClassName	`string`	Class for the input field
hintClassName	`string`	Class for the hint text