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.

Last updated

Was this helpful?