Select

ESelect is a common UI element used in web forms to allow users to select one or multiple options from a set. Demo Here

Import

import ESelect from "@components/Form/ESelect";

Usage

const SelectExample = () => {

    const [value, setValue] = useState("");

    const options = [
        "Option 1",
        "Option 2",
        "Option 3",
    ]

    const changeHandler = (event, option) => {
        setValue(option);
    };

    return (
        <ESelect
            label="Choose"
            value={value}
            onChange={changeHandler}
            options={options}
        />
    )
};

export default SelectExample;

Custom Select

We offer an additional layer of control and personalization. By incorporating elements from both ESelect.Input and ESelect.Option elements, users can tailor their selections to better meet their specific design preferences.

// ** React Imports
import {useState} from 'react';

// ** Custom Components
import ESelect from "@components/Form/ESelect/index.jsx";
import EChip from "@components/Elements/EChip/index.jsx";
import EIcon from "@components/UI/EIcon.jsx";

const DemoSelectCustomChildren = () => {

    const options = [
        {
            icon: {name: "Bitcoin", color: "#E3B510" },
            title: "Bitcoin"
        },
        {
            icon: { name: "Ethereum", color: "#5584FF"},
            title: "Ethereum"
        },
    ];

    const [selectedCrypto, setSelectedCrypto] = useState(options[0]);

    return (
        <ESelect
            label="Currency"
            itemValue="title"
            options={options}
            value={selectedCrypto}
            onChange={(e, option) => {
                setSelectedCrypto(option)
            }}
        >
            <ESelect.Input>
                {(selected) =>
                    selected && (
                        <div className="flex gap-1 items-center">
                            <EIcon
                                name={selected.icon.name}
                                options={{
                                    color: selected.icon.color,
                                    type: selected.icon.type
                                }}
                            />
                            <h2>
                                {selected.title}
                            </h2>
                        </div>
                    )
                }
            </ESelect.Input>

            <ESelect.Option>
                {(option) => (
                    <div className="flex gap-2 items-center">
                        <EIcon
                            name={option.icon.name}
                            options={{
                                color: option.icon.color,
                                type: option.icon.type
                            }}
                        />
                        <h2>
                            {option.title}
                        </h2>
                    </div>
                )}
            </ESelect.Option>
        </ESelect>
    );
};

export default DemoSelectCustomChildren;

Props

For ESelect component, the following props are available:

Prop	Type	Default	Note
value	[Array, String, Object]	-	Value of the selected item.
label	node	-	Component's label
clearable	Boolean	false	Adds clear option.
disabled	Boolean	false	Disables the select.
optionClassNames	String	-	Classes for each option
options	Array	-	Displays list of options.
itemValue	String	-	If the type of options props is an object, the itemValue prop specifies which property of the select options should be used as a key to return as a selected value.
itemTitle	String	-	If the type of options props is an object, the itemTitle prop specifies which property of the select options should be used as a key to be represented visually in ESelect as a selected value.
variant	String	"fill"	The ESelect element can be represented in four ways: fill and border.
message	String	-	Adds a message below the select.
className	String	-	Overrides or extends the component's styles.
maxHeight	[String, Number]	-	Sets the component's max height. Default unit is px.
name	String	-	HTML name attribute.
validateOn	String	"input"	Triggers validation on @values: submit, input, blur.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
size	String	"md"	The ESelect element has three predefined sizes: sm, md, lg.
multiple	Boolean	false	The multiple property allows more than one item to be selected at the same time.
placeholder	String	-	Defines a placeholder displayed in a form control when the control has no value.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
square	Boolean	false	Removes rounded corners of the element.

Callback Functions

The ESelect component contains following callback functions.

Function	Description
onChange	Controls the select. function(event: React.SyntheticEvent, value: [Array, String, Object]) => void 👇 • event: The event source of the callback. • value: select value.