Select input

Last updated: 2.0.0 (18/01/2024)

Usage

import { SelectInput, Option } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState<Option | null>("option1");

    return ( 
        <SelectInput
            value={value}
            setValue={setValue}
            options={[
                "option1",
                "option2",
                "option3"
            ]}
        />
    )
}

Custom options

The Option type is a composite type that will accept a string (as shown above), or an object that includes a label, value and icon, of which value is required:

import { SelectInput, Option } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState<Option | null>("option1");

    return ( 
        <SelectInput
            value={value}
            setValue={setValue}
            options={[
                "option1",
                { value: "option2", label: "Option 2" },
                "option3"
            ]}
        />
    )
}

Here, "Option 2" will be displayed instead of "option2", allowing you to map value to readable strings.

import { SelectInput, Option } from "@valence-ui/core";
import { IconCloud } from "@tabler/react-icons";

function MyComponent() { 
    const [value, setValue] = React.useState<Option | null>("option1");

    return ( 
        <SelectInput
            value={value}
            setValue={setValue}
            options={[
                "option1",
                { value: "option2", icon: <IconCloud /> },
                "option3"
            ]}
        />
    )
}

Here, the IconCloud will be displayed to the left of the option in the dropdown, and the input will use that icon if option2 is selected. If the option is selected, the icon will be replaced with a check icon in the dropdown.

---

Props

Extends GenericInputProps<Option | null> and SelectInputEventProps.

Property	Type	Description
options (required)	Option[]	A list of options to supply for the content of this input.
icon	ReactNode	An icon to display at the left side of this input.
placeholder	string	The placeholder text to display when this input is empty.
actionicon	ReactNode	An icon to display at the right side of this input.
grow	boolean	Shorthand for flex-grow = 1.
dropdownStyle	CSSProperties	Optional styles to apply to the dropdown container.

SelectInputEventProps

Extends GenericTextInputEventProps.

Property	Type	Description
onSelect	(value: Option | null) => void	Callback to be called when an option is selected.