Select

Select components are used for collecting user provided information from a list of options.

Basic Select

Menus are positioned under their emitting elements, unless they are closed to the bottom of the viewport.

Preview

Usage


import { Select, MenuItem } from 'archi-ui'


<Select>
  <MenuItem value='Item 1'>Item 1</MenuItem>
  <MenuItem value='Item 2'>Item 2</MenuItem>
  <MenuItem value='Item 3'>Item 3</MenuItem>
  <MenuItem value='Item 4'>Item 4</MenuItem>
</Select>

Variant

The Select comes with three variants: outlined(default), filled, standard.

Preview

None

Helper text

Preview

None

Helper text

Size

Preview

None

Other props

Preview

None

Disabled

None

Error

None

Read only

None

Required

code


"use client"
 
import React, { useState } from 'react'
import { FormControl, FormHelperText, MenuItem, Select } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [age, setAge] = useState('');
 
  const handleChange = (value) => {
    setAge(value)
  }
 
  return (
    <div className='flex flex-wrap items-center justify-center gap-2'>
      <FormControl disabled>
        <Select value={age} onValueChange={handleChange}>
          <MenuItem divider value=''>
            <em>None</em>
          </MenuItem>
          <MenuItem divider value={10}>Ten</MenuItem>
          <MenuItem divider value={20}>Twenty</MenuItem>
          <MenuItem divider value={30}>Thirty</MenuItem>
          <MenuItem divider value={40}>Fourty</MenuItem>
        </Select>
        <FormHelperText>Disabled</FormHelperText>
      </FormControl>
      <FormControl error>
        <Select value={age} onValueChange={handleChange}>
          <MenuItem divider value=''>
            <em>None</em>
          </MenuItem>
          <MenuItem divider value={10}>Ten</MenuItem>
          <MenuItem divider value={20}>Twenty</MenuItem>
          <MenuItem divider value={30}>Thirty</MenuItem>
          <MenuItem divider value={40}>Fourty</MenuItem>
        </Select>
        <FormHelperText>Error</FormHelperText>
      </FormControl>
      <FormControl>
        <Select value={age} readOnly onValueChange={handleChange}>
          <MenuItem divider value=''>
            <em>None</em>
          </MenuItem>
          <MenuItem divider value={10}>Ten</MenuItem>
          <MenuItem divider value={20}>Twenty</MenuItem>
          <MenuItem divider value={30}>Thirty</MenuItem>
          <MenuItem divider value={40}>Fourty</MenuItem>
        </Select>
        <FormHelperText>Read only</FormHelperText>
      </FormControl>
      <FormControl required>
        <Select value={age} onValueChange={handleChange}>
          <MenuItem divider value=''>
            <em>None</em>
          </MenuItem>
          <MenuItem divider value={10}>Ten</MenuItem>
          <MenuItem divider value={20}>Twenty</MenuItem>
          <MenuItem divider value={30}>Thirty</MenuItem>
          <MenuItem divider value={40}>Fourty</MenuItem>
        </Select>
        <FormHelperText>Required</FormHelperText>
      </FormControl>
    </div>
  );
}

With a dialog

Preview

Select API

API reference docs for the React Select component.

Props

Name	Type	Default	Description
children	`node`	-	The option elements to populate the select with. Can be some `MenuItem` when `native` is false and `option` when `native` is true. The `MenuItem` elements must be direct descendants when `native` is false.
className	`string`	-	Override or extend the styles applied to the component
variant	`'filled' \| 'outlined' \| 'standard'`	`'outlined'`	The variant to use.
color	`'primary' \| 'secondary' \| 'info' \| 'warning' \| 'success' \| 'error'`	`primary`	The color of the componenet.
fullwidth	`bool`	`false`	If true, the select will take up the full width of its container.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the component.
error	`bool`	`false`	If `true`, the input will indicate an error, The prop defaults to the value(false) inherited from the parent FormControl component.
defaultOpen	`bool`	`false`	If `true`, the component is initially open, Use when the component open state is not controlled (i.e. the `open` is not defined). You can only use it when the `native` prop is false (default)
defaultValue	`any`	-	The default value, Use when the component is not controlled.
displayEmpty	`bool`	`false`	If `true`, a value is displayed even if no items are selected. In order to display a meaningful value.
IconComponent	`node`	`<ChevronDown />`	The icon that displays the arrow.
MenuProps	`object`	-	Props applied to `Menu` element.
native	`bool`	`false`	If `true`, the component uses a native `select` element.
multiple	`bool`	`false`	If `true`, `value` must be an array and the menu will support multiple selections.
open	`bool`	`false`	If `true`, the component is shown, You can only use it when the native prop is false(default).
onClose	`func`	-	Callback fired when the component is requests to be closed. Signature: `function() => void`.
onOpen	`func`	-	Callback fired when the component is requests to be opened. Signature: `function() => void`.
renderValue	`func`	-	Rebder the selected value. You can only use it when native prop is false(default). Signature: `function(value: any) => ReactNode` - value: the `value` provided to the component.
onValueChange	`func`	-	Callback fired when the menu item is selected. Signature: `function(value: any) => void` - value: You can pull out the new value by accessing `value`(any).
value	`any`	-	The value of the `select` component, required for controlled component.
scrollLock	`bool`	`true`	The value of the `select` component, required for controlled component.