Dashboard UI Kit

Apps PreviewDownload Design Package

Select

import { Select } from '@duik/it'
import Select from '@duik/select'

Renders selects effortlesly. The core of the select is Dropdown component which gives you superb control over the UI. Check the examples below of the possibilities.

Basic Usage

By default, if you don't provide an "activeOption" prop which represents the value to be displayed, the Select component becomes uncontrolled and stores the active value internaly. You can still pass props such as onOptionClick.

Basic options

Example with controlled value

Basic options

Style your options

Select is very friendly for your UI. Option label doesn't have to be only text, but it can be a react child as well.

Searchable Select

Select offers UI for searchability, however, what happens whit the serached keyword or with the options, that's totally under your control and you should provide this behaviour, as the simple select without data context cannot really predict that.

Multi Select

Multi select is possible as well. To ensure proper behaviour, we are passing multiple prop to the Select component as well as activeOption becomes an array prop instead of an object.

Below you can check an example with controlled value.

Option props

You can easily pass props to the items in the option list as well. In the example, we still want to display an option but we don't want it to be selectable.

Why activeOption has structure of an option instead of clean value?

You might have noticed that the activeOption, or if you would rather call it value, doesn't have a more traditional structure of just being plain string but there is a reason for this.

If you would pass only pure value, the component would have to internally search for the label to be displayed. This wouldn't be a problem at all as you are passing list of options as well, however there are cases where you would want to filter out an option from the options list and the Select component won't be able to find the label for the given value anymore. Passing separate activeOption grants you the ability to do so.

option: SelectOption

value

Required

type: string | number
Option value
label

false

type: React.ReactNode
Display value to be rendered on the select button or select option. Value will be used as fallback if not provided.
props

false

type: props of option component (Button)
You can pass props to the option component as well, such as "disabled"

Select Props

className

false

type: string
Passed to the wrapping element Dropdown
label

false

type: React.ReactNode
Displays label node
placeholder

false

type: React.ReactNode

default value: "Select Option"

Displays placeholder node if there is no activeOption
activeOption

false

type: SelectOption | SelectOption[]
Active option(s) to be displayed. Single or Array.
options

false

type: SelectOption[]
Array of options to be displayed in the options list
multiple

false

type: boolean
Enables behaviour for multiple select.
searchable

false

type: boolean
Will display search field.
name

false

type: string
If you need to know on what select the onOptionClick has been triggered, pass a name value.
onOptionClick

false

type: (option: SelectOption, name?: string)
  => void
Handler when option is clicked.
inputSearchProps

false

type: props of TextField

default value: {}

Pass props such as value and onChange to have access to the input value. See example usage above.
block

false

type: boolean
Expands the select button.
noWrap

false

type: boolean
When multiple elements are rendered, e.g. providing a label, the component will wrap the content with a FormGroup component for mroe consistent UI. pass noWrap={false} to disable the default behaviour.
...rest

false

type: any
Other properties are passed down to the wrapping element Dropdown, such as button props, menu position etc. or even deeper to OuterEventsHandler