Select

Select component is used to select values from a list of options.

A dropdown menu for displaying choices. An elegant alternative to the native <select> element.
Utilizing Radio is recommended when there are fewer total options (less than 5).

Simple Selects

This is an informative helper text.

import Select, { SelectOption, SelectOptionGroup } from "@sonnat/ui/Select";;
import * as React from "react";

const children = [
  <SelectOption value="jack" key="k0">Jack</SelectOption>,
  <SelectOption value="asghar" key="k1">Asghar</SelectOption>,
  <SelectOption value="jolie" key="k2">Jolie</SelectOption>,
  <SelectOption value="kyle" key="k3">Kyle</SelectOption>,
  <SelectOption value="ali" key="k4">Ali</SelectOption>,
  <SelectOptionGroup key="k5" title="Group 1">
    <SelectOption value="michael" key="k6">
      Michael
    </SelectOption>
    <SelectOption value="lucie" key="k7">
      Lucie
    </SelectOption>
    <SelectOption value="maria" key="k8">
      Maria
    </SelectOption>
    <SelectOption value="reza" key="k9">
      Reza
    </SelectOption>
    <SelectOption value="mostafa" key="k10">
      Mostafa
    </SelectOption>
  </SelectOptionGroup>
];

const renderChildren = children => {
  return children.map(child => child);
};

const Demo = () => {
  return (
    <React.Fragment>
      <Select fluid placeholder="Placeholder">
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="Filled variant"
        variant="filled"
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="Searchable"
        searchable
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="Multiple"
        searchable
        multiple
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With searchable + multiple"
        searchable
        multiple
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="Disabled"
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With default value"
        defaultValue="kyle"
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With default value"
        defaultValue={["ali", "kyle"]}
        multiple
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With default value"
        defaultValue={["ali", "kyle"]}
        multiple
        disabled
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With default value + disabled"
        defaultValue="kyle"
        disabled
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With rounded + hasError"
        hasError
        rounded
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="With helperText"
        helperText="This is an informative helper text."
      >
        {renderChildren(children)}
      </Select>
      <Select
        fluid
        placeholder="Small"
        size="small"
      >
        {renderChildren(children)}
      </Select>
    </React.Fragment>
  );
};

export default Demo;

Controlled Select Value

You can use the value, and onChange properties to control the value of the select.

Controlled Open State

You can use the open, onOpen, and onClose properties to control the open state of the select's menu.

API

Learn more about the properties and the customization points.

Usage

import Select, { SelectOption, SelectOptionGroup } from "@sonnat/ui/Select";

//or
import { Select, SelectOption, SelectOptionGroup } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Select Properties

Select Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
placeholder	string	-	The `placeholder` text of the select.
value	string[] \| string	-	The value of the select. Providing an empty string/array will select no options.
defaultValue	string[] \| string	-	The default value. Use when the component is not controlled.
helperText	string	-	The helper text content.
helperIcon	node	-	The helper icon element placed before the helper text.
leadingAdornment	node	-	The leading adornment for this component. This can be used to add a prefix, an action, or an icon to the leading of your input.
trailingAdornment	node	-	The trailing adornment for this component. This can be used to add a suffix, an action, or an icon to the trailing of your input.
searchPlaceholder	string	-	The `placeholder` property of the search field.
searchEmptyStatementText	string	-	The empty statement text when search results are empty.
size	"large" \| "medium" \| "small"	"medium"	The size of the select.
variant	"filled" \| "outlined"	"outlined"	The variant of the select.
rounded	boolean	false	If `true`, the select will be rounded.
disabled	boolean	false	If `true`, the select will be disabled.
focused	boolean	false	If `true`, the select will be focused.
autoFocus	boolean	false	If `true`, the select will be focused on mount.
required	boolean	false	If `true`, the select will be required.
hasError	boolean	false	If `true`, the select will indicate invalid input.
multiple	boolean	false	If `true`, the menu will be searchable.
preventPageScrolling	boolean	false	If `true`, the menu will block the page's scrolling.
searchable	boolean	false	If `true`, the menu will support multiple selections (`value` must be an array).
fluid	boolean	false	If `true`, the select will be fluid (max-width: 100%)
open	boolean	-	If `true`, the menu will be open.
inputProps	object	-	The properties applied to the `input` element.
onOpen	function	-	The callback fires when the menu has opened. Signature: `function() => void`
onClose	function	-	The callback fires when the menu has closed. Signature: `function() => void`
onChange	function	-	The callback fires when the state has changed. Signature: `function(value: string[] \| string) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

Select/Option Properties

Select/Option Properties
Name	Type	Default	Description
children	node	-	The content of the option.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
value required	string	-	The value of the option.
label	string	-	If a label was provided, the select component will use it as the item's display in the menu. It is mandatory to use it when the `children` prop contains complex content (i.e. containing multiple elements).
disabled	boolean	false	If `true`, the option will be disabled.
onClick	function	-	The callback fires when the option has been clicked. Signature: `function(event: React.MouseEvent) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

Select/OptionGroup Properties

Select/OptionGroup Properties
Name	Type	Default	Description
children	node	-	The content of the group.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
titleClassName	string	-	Append to the classNames applied to the title so you can override or extend the styles.
title	string	-	The title of the group.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.