Select

The Select component provides a rich dropdown interface for selecting from a list of options. It supports single and multiple selection, search functionality, keyboard navigation, and option grouping.

Basic Usage

Preview

Choose a fruit

Apple

Banana

Orange

Code

---
import Select from '@uicg/cli/components/Select/select.astro'
import SelectItem from '@uicg/cli/components/Select/select-item.astro'
---

<Select placeholder="Choose a fruit">
  <SelectItem value="apple">Apple</SelectItem>
  <SelectItem value="banana">Banana</SelectItem>
  <SelectItem value="orange">Orange</SelectItem>
</Select>

With Label and Description

Preview

Favorite Fruit

Choose a fruit

Apple

Banana

Orange

Select your preferred fruit

Code

<Select
  label="Favorite Fruit"
  description="Select your preferred fruit"
  placeholder="Choose a fruit"
>
  <SelectItem value="apple">Apple</SelectItem>
  <SelectItem value="banana">Banana</SelectItem>
  <SelectItem value="orange">Orange</SelectItem>
</Select>

Sizes

<!-- Small -->
<Select size="small" placeholder="Small select">
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
</Select>

<!-- Medium (default) -->
<Select size="medium" placeholder="Medium select">
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
</Select>

<!-- Large -->
<Select size="large" placeholder="Large select">
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
</Select>

Small

Small select

Option 1

Option 2

Medium

Medium select

Option 1

Option 2

Large

Large select

Option 1

Option 2

Intent Variants

<!-- Default -->
<Select intent="default" placeholder="Default select">
  <SelectItem value="option1">Option 1</SelectItem>
</Select>

<!-- Primary -->
<Select intent="primary" placeholder="Primary select">
  <SelectItem value="option1">Option 1</SelectItem>
</Select>

<!-- Success -->
<Select intent="success" placeholder="Success select">
  <SelectItem value="option1">Option 1</SelectItem>
</Select>

<!-- Warning -->
<Select intent="warning" placeholder="Warning select">
  <SelectItem value="option1">Option 1</SelectItem>
</Select>

<!-- Danger -->
<Select intent="danger" placeholder="Danger select">
  <SelectItem value="option1">Option 1</SelectItem>
</Select>

Default

Default select

Option 1

Primary

Primary select

Option 1

Success

Success select

Option 1

Warning

Warning select

Option 1

Danger

Danger select

Option 1

Multiple Selection

<Select
  multiple={true}
  label="Multiple Selection"
  placeholder="Choose multiple options"
>
  <SelectItem value="apple">Apple</SelectItem>
  <SelectItem value="banana">Banana</SelectItem>
  <SelectItem value="orange">Orange</SelectItem>
  <SelectItem value="grape">Grape</SelectItem>
  <SelectItem value="strawberry">Strawberry</SelectItem>
</Select>

Multiple Selection

Choose multiple options

Apple

Banana

Orange

Grape

Strawberry

Searchable Select

<Select
  searchable={true}
  label="Searchable Select"
  placeholder="Search for a country"
>
  <SelectItem value="us">United States</SelectItem>
  <SelectItem value="ca">Canada</SelectItem>
  <SelectItem value="mx">Mexico</SelectItem>
  <SelectItem value="uk">United Kingdom</SelectItem>
  <SelectItem value="fr">France</SelectItem>
  <SelectItem value="de">Germany</SelectItem>
  <SelectItem value="jp">Japan</SelectItem>
  <SelectItem value="au">Australia</SelectItem>
</Select>

Searchable Select

Search for a country

United States

Canada

Mexico

United Kingdom

France

Germany

Japan

Australia

Grouped Options

<Select label="Grouped Options" placeholder="Choose an option">
  <SelectGroup label="Fruits">
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectGroup>
  <SelectGroup label="Vegetables">
    <SelectItem value="carrot">Carrot</SelectItem>
    <SelectItem value="broccoli">Broccoli</SelectItem>
    <SelectItem value="spinach">Spinach</SelectItem>
  </SelectGroup>
</Select>

Grouped Options

Choose an option

Fruits

Apple

Banana

Orange

Vegetables

Carrot

Broccoli

Spinach

Disabled State

<!-- Disabled select -->
<Select disabled={true} placeholder="Disabled select">
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
</Select>

<!-- Select with disabled options -->
<Select placeholder="Select with disabled options">
  <SelectItem value="option1">Available Option</SelectItem>
  <SelectItem value="option2" disabled={true}>Disabled Option</SelectItem>
  <SelectItem value="option3">Another Available Option</SelectItem>
</Select>

Disabled Select

Disabled select

Option 1

Option 2

Select with Disabled Options

Select with disabled options

Available Option

Disabled Option

Another Available Option

Error State

<Select
  label="Required Field"
  placeholder="Please select an option"
  error="This field is required"
  required={true}
>
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
  <SelectItem value="option3">Option 3</SelectItem>
</Select>

Required Field

Please select an option

Option 1

Option 2

Option 3

This field is required

Keyboard Navigation

The Select component supports full keyboard navigation:

• Space/Enter: Open dropdown or select focused option
• Arrow Down: Open dropdown or move to next option
• Arrow Up: Move to previous option
• Escape: Close dropdown
• Type: Search for options (when searchable is enabled)

Accessibility

The Select component follows WCAG 2.1 AA guidelines:

• ✅ Keyboard Navigation: Full keyboard support for all interactions
• ✅ Screen Reader Support: Proper ARIA attributes and roles
• ✅ Focus Management: Clear focus indicators and logical tab order
• ✅ Error Handling: Accessible error messages with aria-invalid
• ✅ Required Fields: Clear indication of required fields
• ✅ Labeling: Proper association between labels and controls

Properties

Select

Property	Type	Default	Description
placeholder	string	"Select an option..."	Placeholder text when no option is selected
value	string | string[]	undefined	Selected value(s)
disabled	boolean	false	Whether the select is disabled
required	boolean	false	Whether the select is required
multiple	boolean	false	Allow multiple selections
searchable	boolean	false	Enable search functionality
size	"small" | "medium" | "large"	"medium"	Size of the select
intent	"default" | "primary" | "success" | "warning" | "danger"	"default"	Visual style variant
label	string	undefined	Label text
description	string	undefined	Helper text
error	string	undefined	Error message
class	string	undefined	Additional CSS classes
name	string	undefined	Name attribute for form submission

SelectItem

Property	Type	Default	Description
value	string	Required	The value of the option
disabled	boolean	false	Whether the option is disabled
selected	boolean	false	Whether the option is selected
class	string	undefined	Additional CSS classes

SelectGroup

Property	Type	Default	Description
label	string	undefined	Group label
class	string	undefined	Additional CSS classes

Examples

Contact Form Select

---
import Select from '@uicg/cli/components/Select/select.astro'
import SelectItem from '@uicg/cli/components/Select/select-item.astro'
---

<form>
  <Select
    name="country"
    label="Country"
    description="Select your country of residence"
    required={true}
    searchable={true}
  >
    <SelectItem value="us">United States</SelectItem>
    <SelectItem value="ca">Canada</SelectItem>
    <SelectItem value="uk">United Kingdom</SelectItem>
    <!-- ... more countries -->
  </Select>
</form>

Multi-Select with Categories

---
import Select from '@uicg/cli/components/Select/select.astro'
import SelectItem from '@uicg/cli/components/Select/select-item.astro'
import SelectGroup from '@uicg/cli/components/Select/select-group.astro'
---

<Select
  multiple={true}
  label="Skills"
  placeholder="Select your skills"
  searchable={true}
>
  <SelectGroup label="Frontend">
    <SelectItem value="react">React</SelectItem>
    <SelectItem value="vue">Vue</SelectItem>
    <SelectItem value="angular">Angular</SelectItem>
  </SelectGroup>
  <SelectGroup label="Backend">
    <SelectItem value="node">Node.js</SelectItem>
    <SelectItem value="python">Python</SelectItem>
    <SelectItem value="php">PHP</SelectItem>
  </SelectGroup>
</Select>