dioxus_bootstrap_css/
input_group.rs

1use dioxus::prelude::*;
2
3use crate::types::Size;
4
5/// Bootstrap InputGroup component.
6///
7/// # Bootstrap HTML → Dioxus
8///
9/// | HTML | Dioxus |
10/// |---|---|
11/// | `<div class="input-group">` | `InputGroup { ... }` |
12/// | `<div class="input-group input-group-sm">` | `InputGroup { size: Size::Sm, ... }` |
13/// | `<span class="input-group-text">@</span>` | `InputGroupText { "@" }` |
14///
15/// ```rust,no_run
16/// # use dioxus::prelude::*;
17/// # use dioxus_bootstrap_css::prelude::*;
18/// # fn _doctest() -> Element {
19/// rsx! {
20///     InputGroup {
21///         InputGroupText { "@" }
22///         Input { placeholder: "Username" }
23///     }
24///     InputGroup {
25///         Input { placeholder: "Search..." }
26///         InputGroupText {
27///             Button { color: Color::Primary, Icon { name: "search" } }
28///         }
29///     }
30/// }
31/// # }
32/// ```
33#[derive(Clone, PartialEq, Props)]
34pub struct InputGroupProps {
35    /// Input group size.
36    #[props(default)]
37    pub size: Size,
38    /// Additional CSS classes.
39    #[props(default)]
40    pub class: String,
41    /// Child elements (inputs, InputGroupText, buttons).
42    pub children: Element,
43}
44
45#[component]
46pub fn InputGroup(props: InputGroupProps) -> Element {
47    let size_class = match props.size {
48        Size::Md => String::new(),
49        s => format!(" input-group-{s}"),
50    };
51
52    let full_class = if props.class.is_empty() {
53        format!("input-group{size_class}")
54    } else {
55        format!("input-group{size_class} {}", props.class)
56    };
57
58    rsx! {
59        div { class: "{full_class}", {props.children} }
60    }
61}
62
63/// Text addon for InputGroup.
64#[derive(Clone, PartialEq, Props)]
65pub struct InputGroupTextProps {
66    /// Additional CSS classes.
67    #[props(default)]
68    pub class: String,
69    /// Child elements.
70    pub children: Element,
71}
72
73#[component]
74pub fn InputGroupText(props: InputGroupTextProps) -> Element {
75    let full_class = if props.class.is_empty() {
76        "input-group-text".to_string()
77    } else {
78        format!("input-group-text {}", props.class)
79    };
80
81    rsx! {
82        span { class: "{full_class}", {props.children} }
83    }
84}
dioxus_bootstrap_css/input_group.rs

dioxus_bootstrap_css/
input_group.rs
