<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
## Definition
Dropdown fields allow users to input existing options that is preset by the deisgner/ developer. It can be just one choice per field, or they might be multiple choices depends on the circumstances.
## Structure
<CustomArgsTable of={SelectField} />
export const options = [
{ value: 0, label: "Option One" },
{ value: 1, label: "Option Two" },
];
## Examples
<Examples title=" Single Selected / Unselected" footnote={
<ul>
<li>The difference between the types are when they are filled. </li>
</ul>
}>
<Example title="Single Select [Unselected]">
<SelectField
label={"Single Select"}
options={options}
/>
</Example>
<Example title="Single Select [Selected]">
<SelectField
label={"Single Select"}
options={options}
defaultValue={options[0]}
/>
</Example>
<Example title="Multi Select [Unselected]">
<SelectField
label={"Multi Select"}
options={options}
isMulti={true}
/>
</Example>
<Example title="Multi Select [Selected]">
<SelectField
label={"Multi Select"}
options={options}
isMulti={true}
defaultValue={options[0]}
/>
</Example>
</Examples>
<Examples title="Variants">
<Example title="Default">
<SelectField
label={"Default Select"}
options={options}/>
</Example>
<Example title="Icon Left">
WIP
{/* <SelectField options={options} components={{ Control }}/> */}
</Example>
</Examples>
## Variant Caviats (WIP) - To be updated
Using Icons is a bit of a strange one cause you can't simpily pass in an icon as a prop. You have to pass in a component. To the select field.
```js
// Bad: Inline declaration will cause remounting issues
const BadSelect = props => (
<Select {...props} components={{
Control: ({ children, ...rest }) => (
<components.Control {...rest}>
👎 {children}
</components.Control>
)}}
/>
)
// Good: Custom component declared outside of the Select scope
