yew_bootstrap/component/form/
select_option.rs

1use yew::prelude::*;
2
3/// # Properties for a [SelectOptgroup] component.
4#[derive(Properties, Clone, PartialEq)]
5pub struct SelectOptgroupProps {
6    /// Label for the group
7    pub label: AttrValue,
8    /// Option or OptGroup children
9    #[prop_or_default]
10    pub children: Children,
11    /// Optional CSS classes
12    #[prop_or_default]
13    pub class: Classes,
14}
15
16/// # Properties for [SelectOption]
17#[derive(Properties, Clone, PartialEq)]
18pub struct SelectOptionProps {
19    /// Visible label
20    pub label: AttrValue,
21    /// Value for the select when this option is selected
22    #[prop_or_default]
23    pub value: AttrValue,
24    /// When true, this option is selected. Only one should be selected unless
25    /// multiple is set for the select
26    #[prop_or_default]
27    pub selected: bool,
28    /// Optional CSS classes
29    #[prop_or_default]
30    pub class: Classes,
31}
32
33
34/// # Option group
35///
36/// Use to separate options inside a select. See [SelectOptgroupProps]
37/// for a list of properties.
38///
39/// It can typically be used inside a [crate::component::form::FormControl] with
40/// [crate::component::form::FormControlType::Select] type
41#[function_component]
42pub fn SelectOptgroup(props: &SelectOptgroupProps) -> Html {
43    html! {
44        <optgroup label={ props.label.clone() } class={ props.class.clone() }>
45            { for props.children.iter() }
46        </optgroup>
47    }
48}
49
50/// # Select option
51///
52/// Options inside a select. See [SelectOptionProps] for a list of properties.
53///
54/// It can typically be used inside a [crate::component::form::FormControl] with
55/// [crate::component::form::FormControlType::Select] type, or grouped inside a [SelectOptgroup]
56#[function_component]
57pub fn SelectOption(props: &SelectOptionProps) -> Html {
58    html! {
59        <option value={ props.value.clone() } class={ props.class.clone() }
60                selected={ props.selected }>
61            { props.label.clone()}
62        </option>
63    }
64}
65