This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Select

Select allows users to make a single selection from an options menu. Keep in mind that Select should not be used without the label.

Table of contents

How to use Select

  • Use Select to present many different options in one component
  • When you have only a few options try to show them all at once, using Radio buttons.
  • Use Select in Forms
  • Order the list of options in a logical way, so it make sense for the user
  • Don't use Select for a very long list of options, instead for those cases use Autocomplete
  • if you use Select component add your custom label to it or use our SelectField instead

Using as a controlled select

To use the Select as controlled, you need to provide the value of one of the options as the value prop for the Select, and the onChange handler.

const ExampleControlled = () => {
const [selectValue, setSelectValue] = useState('optionOne');
const handleOnChange = (event) => setSelectedValue(event.target.value);
return (
<Select
id="optionSelect-controlled"
name="optionSelect-controlled"
value={selectValue}
onChange={handleOnChange}
>
<Select.Option value="optionOne">Option 1</Select.Option>
<Select.Option value="optionTwo">Long Option 2</Select.Option>
</Select>
);
};

Using as an uncontrolled select

To use the Select as uncontrolled, you shouldn't pass the value prop, if you want to have an option selected by default, you can instead use the defaultValue prop.

<Select
id="optionSelect-controlled"
name="optionSelect-controlled"
defaultValue="optionOne"
>
<Select.Option value="optionOne">Option 1</Select.Option> // This option would
be selected by default
<Select.Option value="optionTwo">Long Option 2</Select.Option>
</Select>

Select vs dropdown

  1. Dropdown menus are typically used for navigation or command menus, where an action is initiated based on the selection.
  2. Select is a type of input, where the user is choosing one option from the list, typically used in Forms.

Code examples

Select with label

In order to provide the best experience for your users consider using label that we provide for you in the FormControl

Select with validation

There might be cases where you would need to include the help text or validation message into your form. Read more about those elements in FormControl documentation

Select state disabled

Select with placeholder

Select with error

Content recommendations

  • Options should be written in sentence case (the first word capitalized, the rest lowercase).
  • Options should be labeled in a clear way, so it's obvious what the option will do

Accessibility

  • Select should contain a label, if needed help message and validation message if needed. We provide SelectField component, that contains all of those elements.
  • Select should always a name property.

Props

Select

NameRequiredDefaultTypeDescription
defaultValueundefinedstring
isDisabled
false
true
isInvalid
false
true
isRequired
false
true
onChangeChangeEventHandler<HTMLSelectElement>
sizemedium
"small"
"medium"
valueundefinedstring
willBlurOnEsctrue
false
true
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-selectstringA [data-test-id] attribute used for testing purposes

Select Option

NameRequiredDefaultTypeDescription
isDisabled
false
true
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-select-optionstringA [data-test-id] attribute used for testing purposes