Select

A dropdown list for selecting a single item.

---

Usage

import { Select } from "@newfold/ui-component-library";

<Select
    id='select-demo'
    onChange={handleChange}
    value='1'
    selectedLabel='Option 1'
>
    <Select.Option
        label="Option 1"
        value="1"
    />
    <Select.Option
        label="Option 2"
        value="2"
    />
    <Select.Option
        label="Option 3"
        value="3"
    />
    <Select.Option
        label="Option 4"
        value="4"
    />
</Select>

---

Options

You can pass options to the Select component in two ways. You can pass them as children of the Select component or you can pass them as an array of objects to the options prop.

1. Options as Children

Use the childrern prop to pass in the options by utilizing Select.Option component. In this case changing the selectedLabel should be done manually in the handleChange function

const [selectedVal, setSelectedVal] = useState(1);

const handleChange = (val) => {
    setSelectedVal(val);
};

<Select
    id='select-demo-children'
    onChange={handleChange}
    value={selectedVal}
    selectedLabel={`Option ${selectedVal}`}
>
    <Select.Option
        label="Option 1"
        value="1"
    />
    <Select.Option
        label="Option 2"
        value="2"
    />
    <Select.Option
        label="Option 3"
        value="3"
    />
    <Select.Option
        label="Option 4"
        value="4"
    />
</Select>

2. Options as Array

Use the options prop to pass in the options as an array of objects. In this case, displayed selectedLabel will be updated automatically on change.

const [selectedVal, setSelectedVal] = useState(1);

const handleChange = (val) => {
    setSelectedVal(val);
};

<Select
    id='select-demo-array'
    onChange={handleChange}
    value={selectedVal}
    options={[
      {
        label: 'Option 1',
        value: '1'
      },
      {
        label: 'Option 2',
        value: '2'
      },
      {
        label: 'Option 3',
        value: '3'
      },
      {
        label: 'Option 4',
        value: '4'
      }
    ]}
/>

---

Label

Use the label prop to add a label to the Select component.

Select an option

<Select
    id='select-demo-label'
    onChange={handleChange}
    value='1'
    selectedLabel='Option 1'
    label="Select an option"
>
    <Select.Option
        label="Option 1"
        value="1"
    />
    <Select.Option
        label="Option 2"
        value="2"
    />
    <Select.Option
        label="Option 3"
        value="3"
    />
    <Select.Option
        label="Option 4"
        value="4"
    />
</Select>

---

Disabled

Use the disabled prop to disable the Select component.

A disabled select

<Select
    id='select-demo-disabled'
    onChange={handleChange}
    value='1'
    selectedLabel='Option 1'
    label="A disabled select"
    disabled={true}
>
    <Select.Option
        label="Option 1"
        value="1"
    />
    <Select.Option
        label="Option 2"
        value="2"
    />
    <Select.Option
        label="Option 3"
        value="3"
    />
    <Select.Option
        label="Option 4"
        value="4"
    />
</Select>

---

Props

Attribute	Type	Description	Default
id*	string |	The id of the select element.	-
value*	string | number | bool |	The value of the select element.	-
onChange*	function |	Callback function that is fired when the select value changes.	-
options	array |	Array of options to be rendered in the select element.	-
children	node |	Alternative to options array. Pass `Select.Option` components as children.	-
selectedLabel	string |	-	-
label	string |	-	-
labelProps	object |	-	-
labelSuffix	node |	-	-
disabled	bool |	If true, the select will be disabled.	false
className	string |	-	-