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>
            <SelectContent label="Fruits">
                <SelectItem value="apple">"Apple"</SelectItem>
                <SelectItem value="banana">"Banana"</SelectItem>
                <SelectItem value="blueberry">"Blueberry"</SelectItem>
                <SelectItem value="grapes">"Grapes"</SelectItem>
                <SelectItem value="pineapple">"Pineapple"</SelectItem>
            </SelectContent>
        </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">
            <SelectContent label="Fruits">
                <SelectItem value="apple">"Apple"</SelectItem>
                <SelectItem value="banana">"Banana"</SelectItem>
                <SelectItem value="blueberry">"Blueberry"</SelectItem>
                <SelectItem value="grapes">"Grapes"</SelectItem>
                <SelectItem value="pineapple">"Pineapple"</SelectItem>
            </SelectContent>
        </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">
            <SelectContent label="Fruits">
                <SelectItem value="apple">"Apple"</SelectItem>
                <SelectItem value="banana">"Banana"</SelectItem>
                <SelectItem value="blueberry">"Blueberry"</SelectItem>
                <SelectItem value="grapes">"Grapes"</SelectItem>
                <SelectItem value="pineapple">"Pineapple"</SelectItem>
            </SelectContent>
        </Select>
    }
}

Anatomy

Import all parts and piece them together.

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

#[component]
pub fn SelectAnatomy() -> impl IntoView {
    view! {
        <Select>
            <SelectContent>
                <SelectItem />
            </SelectContent>
        </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	Reactive<String>	""	A reactive value coupled to the currently selected item's value.

Implements global and select attributes.

SelectContent

Contains a group of items for the Select.

Implements global and optgroup attributes.

SelectItem

Contains an item with a value to be selected.

Implements global and option attributes.