Input Demo
use leptos::prelude::*;
use crate::components::ui::input::Input;
// TODO Fix 🐛 Input type="number" can take "e" as a valid input
#[component]
pub fn DemoInput() -> impl IntoView {
view! {
<div class="space-y-4 w-full max-w-lg">
<h2 class="text-2xl font-bold">Input Demo</h2>
<Input placeholder="Default input" />
<Input r#type="email" placeholder="Email input" />
<Input r#type="password" placeholder="Password input" />
<Input
class="border-2 border-purple-500 focus:border-purple-700"
placeholder="Custom styled input"
/>
<Input r#type="number" placeholder="Number input" />
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_inputui add inputUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/input.rs
use leptos::prelude::*;
use leptos_ui::input;
use crate::components::ui::_styles::STYLES;
mod components {
use super::*;
input! {Input,
STYLES::PLACEHOLDER_MUTED_FOREGROUND,
STYLES::FILE_STYLES,
STYLES::DISABLED_NOT_ALLOWED,
STYLES::FOCUS_VISIBLE_RING,
STYLES::RING_OFFSET_BG,
STYLES::BORDER_INPUT,
STYLES::FLEX_WIDTH_FULL,
"h-10 rounded-md bg-background px-3 py-2",
"text-sm text-muted-foreground"
}
}
pub use components::*;
Update the imports to match your project setup.
Usage
use crate::components::ui::input::Input;
<Input placeholder="Enter text..." />