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)
/>
}
OptionalSelect# As the name implies, this variant stores its chosen value in an Option
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)
/>
}
Using the max
Keyboard navigation# The select component was designed with keyboard navigation in mind. Press Tab Shift + Tab Enter ArrowDown ArrowUp Enter 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
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
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
