Select

Displays a list of options for the user to pick from—triggered by a button.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SelectExample() -> impl IntoView {
    view! {
        <Select>
            <SelectOption value="">"Select status"</SelectOption>
            <SelectOption value="todo">"Todo"</SelectOption>
            <SelectOption value="in-progress">"In Progress"</SelectOption>
            <SelectOption value="done">"Done"</SelectOption>
            <SelectOption value="cancelled">"Cancelled"</SelectOption>
        </Select>
    }
}

Placeholder

A placeholder can be set to hint to the user what type of value this field expects.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SelectPlaceholderExample() -> impl IntoView {
    view! {
        <Select placeholder="Select your favorite fruit">
            <SelectOptGroup label="Fruits">
                <SelectOption value="apple">"Apple"</SelectOption>
                <SelectOption value="banana">"Banana"</SelectOption>
                <SelectOption value="blueberry">"Blueberry"</SelectOption>
                <SelectOption value="grapes">"Grapes"</SelectOption>
                <SelectOption value="pineapple">"Pineapple"</SelectOption>
            </SelectOptGroup>
        </Select>
    }
}

Default

Set a default value to be pre-selected.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SelectDefaultExample() -> impl IntoView {
    view! {
        <Select default="pineapple">
            <SelectOptGroup label="Fruits">
                <SelectOption value="apple">"Apple"</SelectOption>
                <SelectOption value="banana">"Banana"</SelectOption>
                <SelectOption value="blueberry">"Blueberry"</SelectOption>
                <SelectOption value="grapes">"Grapes"</SelectOption>
                <SelectOption value="pineapple">"Pineapple"</SelectOption>
            </SelectOptGroup>
        </Select>
    }
}

Groups

Use SelectOptGroup to organize options into categories.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SelectGroupsExample() -> impl IntoView {
    view! {
        <Select>
            <SelectOption value="">"Select department"</SelectOption>
            <SelectOptGroup label="Engineering">
                <SelectOption value="frontend">"Frontend"</SelectOption>
                <SelectOption value="backend">"Backend"</SelectOption>
                <SelectOption value="devops">"DevOps"</SelectOption>
            </SelectOptGroup>
            <SelectOptGroup label="Sales">
                <SelectOption value="sales-rep">"Sales Rep"</SelectOption>
                <SelectOption value="account-manager">"Account Manager"</SelectOption>
                <SelectOption value="sales-director">"Sales Director"</SelectOption>
            </SelectOptGroup>
            <SelectOptGroup label="Operations">
                <SelectOption value="support">"Customer Support"</SelectOption>
                <SelectOption value="product-manager">"Product Manager"</SelectOption>
                <SelectOption value="ops-manager">"Operations Manager"</SelectOption>
            </SelectOptGroup>
        </Select>
    }
}

Disabled

Set the disabled prop on the Select component to disable the select.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SelectDisabledExample() -> impl IntoView {
    view! {
        <Select disabled=true>
            <SelectOption value="">"Disabled"</SelectOption>
            <SelectOption value="apple">"Apple"</SelectOption>
            <SelectOption value="banana">"Banana"</SelectOption>
            <SelectOption value="blueberry">"Blueberry"</SelectOption>
        </Select>
    }
}

Invalid

Set the invalid prop on the Select component to toggle invalid styling.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SelectInvalidExample() -> impl IntoView {
    view! {
        <Select invalid=true>
            <SelectOption value="">"Error state"</SelectOption>
            <SelectOption value="apple">"Apple"</SelectOption>
            <SelectOption value="banana">"Banana"</SelectOption>
            <SelectOption value="blueberry">"Blueberry"</SelectOption>
        </Select>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::select::*;

#[component]
pub fn SelectAnatomy() -> impl IntoView {
    view! {
        <Select>
            <SelectOptGroup>
                <SelectOption />
            </SelectOptGroup>
        </Select>
    }
}

API Reference

Select

Contains all the parts of the Select.

Custom Attributes
Name	Type	Default	Description
default	String	""	Set the default selected value. Setting value overrides this setting.
invalid	bool	false	Toggle invalid appearance and behavior.
placeholder	String	""	Sets a placeholder value displayed on initial load. Setting default will override this value.
value	String	""	A reactive value coupled to the currently selected item's value.

Implements global and select attributes.

SelectOptGroup

Contains a group of items for the Select.

Implements global and optgroup attributes.

SelectOption

Contains an item with a value to be selected.

Implements global and option attributes.

Getting Started

Components

Select

Placeholder

Default

Groups

Disabled

Invalid

Anatomy

API Reference

Select

SelectOptGroup

SelectOption