Skip to main content

SelectField


Example

Select a color
<SelectField
value={value}
onChange={setValue}
name="color"
label="What's your favorite color?"
placeholder="Select a color"
options={[
{
value: 1,
label: "Red",
kind: "two-line",
secondLine: "#ff0000",
},
{
value: 2,
label: "Blue",
kind: "two-line",
secondLine: "#0000ff",
},
{
value: 3,
label: "Green",
kind: "two-line",
secondLine: "#00ff00",
},
]}
/>

Props

NameTypeDefault ValueRequiredDescription
menuSize"large" | "medium"No
placeholderstringNo
optionsSelectOption<A>[]Yes
noOptionsMessagestringNo
isReadOnlybooleanNo
searchablebooleanNo
isMultibooleanNo
namestringNo
valueA | A[]Yes
onChange((value: A) => unknown) | ((value: A[]) => unknown)Yes
onBlur() => unknownNo
labelstringYes
issuesNonEmptyArray<Children>No
disabledbooleanNo
assistiveTextChildrenNo
autoFocusbooleanNo
hintstringNo
hintPlacement"bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"No
showMultiSelectBulkActionsbooleanNo
selectAllButtonLabelstringNo
clearAllButtonLabelstringNo
multiSelectMode"summary" | "chips"No
multiValueMessage(numberOfSelectedOptions: number) => stringNo

Related components