Select
Select are used to select a single value from a list of options.
It supports single select and multiple select. It also supports
object as data source. Below is a complete example of a select component.
import { Form, Select, SubmitButton } from '@fluid-design/fluid-ui' ;
import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline' ;
import { useState } from 'react' ;
import * as Yup from 'yup' ;
const [ isSubmitted , setIsSubmitted ] = useState ( false );
const validationSchema = Yup. object (). shape ({
state: Yup. object (). required ( 'State is required' ),
reservationTime: Yup. string (). required ( 'Reservation time is required' ),
food: Yup. array (). min ( 1 , 'You must select at least one food' ),
onSubmit ={ ( values , { setSubmitting }) => {
validationSchema ={ validationSchema }
< Select itemKey = 'name' list ={ states } name = 'state' autoComplete = 'state' />
placeholder = 'Select a time'
emptyOptionText = 'Unspecified'
disabledKey = 'unavailable'
label = "What's on the menu? (max 4 items)"
placeholder = 'Select your favorites'
className = 'w-full btn-light-primary dark:btn-bold-primary'
iconStart ={ ShoppingCartIcon }
text: 'Order submitted!' ,
import { Form, Select } from '@fluid-design/fluid-ui' ;
< Select name = 'car' list ={ cars } label = 'Select a car' />
Copy
To allow multiple selections, pass multiple
prop, and pass an array of values to value
prop.
If you want to set a maximum number of selections, you can do so by setting multiple
prop to a number.
import { Form, Select } from '@fluid-design/fluid-ui' ;
< Select name = 'cars' list ={ cars } label = 'Select cars' multiple />
Copy
If you want to have an empty option, you can add hasEmptyOption
prop.
You can also customize the empty option by passing a string to emptyOptionText
prop.
emptyOptionText = "I don't have a car"
Copy
You can replace Option
and SelectedOption
components with your own.
import { Form, Select, SubmitButton } from '@fluid-design/fluid-ui' ;
label = "What's on the menu?"
placeholder = 'Select as many as you like'
itemClassName = 'flex flex-wrap'
rednerOptionItem ={ ({ item , Option }) => (
className ={ ({ active , selected , disabled }) =>
'flex flex-row items-center justify-start gap-2 px-2 py-1' ,
selected && 'bg-blue-200' ,
disabled && 'bg-gray-200'
disabled ={ item.available === false }
{ ({ active , selected , disabled }) => (
< div className = 'h-4 w-4' >
< div className = 'flex-grow' > { item.name } </ div >
renderSelectedItem ={ ({ item , remove }) => (
className = 'flex flex-row items-center justify-start gap-2 rounded-full bg-primary-200 px-2 py-1'
< div className = 'flex-grow text-sm' > { item.name } </ div >
< XMarkIcon className = 'h-4 w-4' />
Copy
Prop Default Description name
String
list
Array
listClassName
String
buttonClassName
String
Class name of the button.
labelClassName
String
itemClassName
String
Class name of the input item.
selectedItemsClassName
String
Class name of the selected items container.
className
String
Class name of the select.
placeholder
String
Placeholder of the select.
description
String
Description of the select.
disabled
false
Boolean
If true
, disables the select.
disabledKey
String
Key of the item in the list that should be disabled.
itemKey
String
Key of the item in the list.
multiple
false
Boolean | Number
If true
, allows multiple selections. If a number, sets a maximum number of selections.
label
String
hasEmptyOption
false
Boolean
If true
, adds an empty option.
emptyOptionText
''
String
Text of the empty option.