Select

Select is a form component to add default styling to the native <select> element, representing a control that provides a menu of options. The default style definitions are extended from the TextInput component, including the TextInput's available props, like block.

Default example

A Select component's menu of options can be generated by encapsulating text around the Select.Option child component or defining the text property on any given Select.Option instance within the Select parent component as demonstrated below:

<Select name="age" autofocus>
    <Select.Option>Item 1 to select</Select.Option>
    <Select.Option text='Item 2 to select' />
</Select>

Rendering option elements with items prop

When you want to keep the rendering implementation of your Select component more compact, you can define an array of string items to be rendered as follows:

<Select name="age" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />

Pre-select an option via the selected prop

Age 3 should be selected by default.

<Select name="age" selected='Age 3' items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />

Making a Select full-width via block prop

<Select block name="age" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />

Disabling a Select

<Select disabled name="age" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />

Selecting multiple options

<Select multiple name="age" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />

Ajusting the size output of <select> with small and large props

<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Select size='small' name="age" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
    <Select size='large' name="age" items={['Age 1', 'Age 2', 'Age 3', 'Age 4', 'Age ...n']} />
</Flex>

System props

Select components get BACKGROUND BORDER, COMMON and TYPOGRAPHY system props, since the component is an extension of the TextInput. Read the System Props doc page for a full list of available props. Check out the respective MDN docs to learn more about the <select> element.

Component props

NameTypeDefaultDescription
autocompleteStringAllows user to set autocomplete attribute on input. See MDN docs for attribute documentation.
aria-labelStringLabel that describes the select for screen reader users. Learn more about aria-* properties.
blockBooleanSets the input field to full-width, relative to the parent container
contrastBooleanAdds bg- and fore-ground contrast to the input field and text
disabledBooleanSets the disabled attribute on the element
idStringSets the id attribute on the element
itemsArrayUsed to render a select's option items. Optionally, use Select.Option for each option you wish to render
monospaceBooleanSet the input field's font-family to monospace as defined in the theme
nameStringSets the name attribute on the element
requiredBooleanSets the required attribute on the element
sizeStringCan be either small or large. Creates a smaller or larger <select> than the default.