Select

Use the select component to enable selection of one option from a list.


import {Select} from '@primer/react-brand'

Examples

Loading

Loading

Loading

Use Select alongside FormControl to ensure the control has a corresponding form label.

Loading

Loading

Loading

FormControl can appear in medium and large dimensions using the size prop.

Loading

Pass the required prop to ensure that the input field must be filled out before submitting the form.

Loading

Select inputs can be used in uncontrolled mode by forwarding a ref to the underlying element.

Loading

Select provides a React-based alternative to the native HTML <select>, <option> and <optgroup> elements.

The component API supports all standard HTML attribute props, while providing some additional behaviour as described below.

Name	Type	Description
`children`	`'Select.Option'` `'Select.OptGroup'`	Valid child nodes
`className`	`string`	Sets a custom class
`id`	`string`	Sets a custom id
`fullWidth`	`boolean`	Stretches elements visually to the edges of its parent container.
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node
`size`	`'medium'` `'large'`	Visual dimensions for the input
`validationStatus`	`'error'` `'success'`	Applies visual and semantic state to the underlying elements

Additional props can be passed to the <select> element. See MDN for a list of props accepted by the <select> element.

Name	Type	Default	Description
`value`	`string`		The value to be supplied during form subsmission.

Additional props can be passed to the <option> element. See MDN for a list of props accepted by the <option> element.

Name	Type	Default	Description
`label`	`string`		The name of the group of options.

Additional props can be passed to the <optgroup> element. See MDN for a list of props accepted by the <optgroup> element.