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

dioxus_bootstrap_css/
input_group.rs
