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>
    }
}

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.
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.