Select#

Select inputs allow you to choose between different predefined values.

Lets assume this type definition, providing us with a set of values to choose from.

#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)] enum Foo { A, B, C, }

Variants#

There are three variants of the select component, accepting different inputs and changing only slightly in its behavior.

Select#

The simplest form, requiring a selected option to be present the whole time.

let (selected, set_selected) = create_signal(Foo::A); view! { <Select options=vec![Foo::A, Foo::B, Foo::C] search_text_provider=move |o| format!("{o}") render_option=move |o| format!("{o:?}") selected=selected set_selected=move |v| set_selected.set(v) /> }
A

OptionalSelect#

As the name implies, this variant stores its chosen value in an Option, allowing the select to be initialized without a value and optionally allowing the user to deselect the current value.

let (selected_opt, set_selected_opt) = create_signal(Option::<Foo>::None); view! { <OptionalSelect options=vec![Foo::A, Foo::B, Foo::C] search_text_provider=move |o| format!("{o}") render_option=move |o| format!("{o:?}") selected=selected_opt set_selected=set_selected_opt allow_deselect=true /> }

Multiselect#

In its simplest form, the Select component can be created with a static list of options to choose from.

let (selected_multi, set_selected_multi) = create_signal(vec![Foo::A, Foo::B]); view! { <Multiselect options=vec![Foo::A, Foo::B, Foo::C] search_text_provider=move |o| format!("{o}") render_option=move |o| format!("{o:?}") selected=selected_multi set_selected=move |v| set_selected_multi.set(v) /> }
AB

Using the max prop, a maximum number of selectable elements can be specified. Here: 2

A

Keyboard navigation#

The select component was designed with keyboard navigation in mind. Press Tab to jump to the next or Shift + Tab to jump to the previous select. Open the dropdown using Enter. Preselect an available option using the ArrowDown and ArrowUp keys. When the dropdown is not open, starting to preselect an element using the arrow keys will open it. Choose an option by pressing Enter. Close the dropdown by pressing Escape.

Select options can be searched. When opening the dropdown of available options, focus will automatically jump to the search input, allowing you to type instantly. When closing the dropdown, focus is automatically restored to the select, allowing you to Tab to the next element.

Customization#

Let's define a select component which allows selection from a list of struct values.

#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)] struct User { name: String, value: ordered_float::OrderedFloat<f32>, } impl std::fmt::Display for User { fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { f.write_fmt(format_args!("{} - {}", &self.name, &self.value)) } } let selectable_users = vec![ User { name: "Tom".to_owned(), value: ordered_float::OrderedFloat(1.0), }, User { name: "Bob".to_owned(), value: ordered_float::OrderedFloat(42.0), }, ]; let (selected_user, set_selected_user) = create_signal(selectable_users[0].clone()); view! { <P>"Selected user is: " { move || selected_user.get().to_string() }</P> <Select options=selectable_users.clone() search_text_provider=move |o| o.to_string() render_option=move |o: User| o.name selected=selected_user set_selected=move |v| set_selected_user.set(v) /> }

Selected user is: Tom - 1

Tom

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.

--select-padding --select-min-height --select-selected-color --select-selected-background-color --select-selected-border --select-selected-border-bottom --select-selected-border-radius --select-selected-badge-color --select-selected-badge-background-color --select-selected-placeholder-color --select-focused-border-color --select-dropdown-background-color --select-dropdown-shadow --select-search-color --select-search-background-color --select-no-items-color --select-no-items-background-color --select-item-color --select-item-background-color --select-item-padding --select-item-disabled-background-color --select-item-disabled-color --select-item-preselected-background-color --select-item-hover-background-color --select-item-selected-background-color