🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Select

A dropdown select component for choosing an option from a list

Installation

The Select component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Select component into your React component.

import { Select } from 'reacui';

Basic Usage

The Select component provides a styled dropdown for selecting options.

Select an option

<label htmlFor="basic-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Select an option
</label>
<Select id="basic-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

With Option Groups

Group related options together for better organization.

Select a vehicle

<label htmlFor="grouped-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Select a vehicle
</label>
<Select id="grouped-select">
  <option value="">Please select</option>
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
    <option value="hatchback">Hatchback</option>
  </optgroup>
  <optgroup label="Motorcycles">
    <option value="cruiser">Cruiser</option>
    <option value="sport">Sport</option>
    <option value="touring">Touring</option>
  </optgroup>
</Select>

Select States

Select inputs can be in different states such as default, disabled, or with a default value.

Default

With default value

Disabled

{/* Default */}
<label htmlFor="default-state" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Default
</label>
<Select id="default-state">
  <option value="">Please select</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</Select>

{/* With default value */}
<label htmlFor="selected-state" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  With default value
</label>
<Select id="selected-state" defaultValue="option2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

{/* Disabled */}
<label htmlFor="disabled-state" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
  Disabled
</label>
<Select id="disabled-state" disabled>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Validation

Select components can display validation states to provide user feedback.

Valid selection

This selection is valid!

Invalid selection

Please make a selection

{/* Valid Selection */}
<label htmlFor="valid-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Valid selection
</label>
<Select 
  id="valid-select" 
  defaultValue="option1"
  state="valid" 
>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</Select>
<p className="mt-1 text-sm text-green-600">This selection is valid!</p>

{/* Invalid Selection */}
<label htmlFor="error-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Invalid selection
</label>
<Select 
  id="error-select" 
  defaultValue=""
  state="error" 
>
  <option value="" disabled>Please select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</Select>
<p className="mt-1 text-sm text-red-600">Please make a selection</p>

API Reference

The following props are available for the Select component.

Prop	Type	Default	Description
id	string	-	The id attribute of the select element
name	string	-	The name attribute of the select element
defaultValue	string	-	The initial value of the select element
value	string	-	The controlled value of the select element
disabled	boolean	false	Whether the select is disabled
state	enum	'default'	The validation state of the select: 'default', 'valid', or 'error'
onChange	function	-	Callback function that is triggered when the select value changes