Input
Displays a form input field or a component that looks like an input field.
use yew::prelude::*;
use crate::components::ui::input::Input;
#[function_component]
pub fn InputDemo() -> Html {
html! {
<Input r#type="email" placeholder="Email" />
}
}
use yew::prelude::*;
use crate::components::ui::input::Input;
#[function_component]
pub fn InputDemo() -> Html {
html! {
<Input r#type="email" placeholder="Email" />
}
}
Installation
The CLI is not yet available. For now, manually copy the component source into your project.
rust-shadcn-ui add input
Usage
use yew::prelude::*;
use crate::components::ui::input::Input;
#[component]
fn Usage() -> impl IntoView {
view! {
<Input />
}
}Examples
Default
use yew::prelude::*;
use crate::components::ui::input::Input;
#[function_component]
pub fn InputDemo() -> Html {
html! {
<Input r#type="email" placeholder="Email" />
}
}
use yew::prelude::*;
use crate::components::ui::input::Input;
#[function_component]
pub fn InputDemo() -> Html {
html! {
<Input r#type="email" placeholder="Email" />
}
}
File
use yew::prelude::*;
use crate::components::ui::{input::Input, label::Label};
#[function_component]
pub fn InputFile() -> Html {
html! {
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label r#for="picture">{"Picture"}</Label>
<Input id="picture" r#type="file" />
</div>
}
}
use yew::prelude::*;
use crate::components::ui::{input::Input, label::Label};
#[function_component]
pub fn InputFile() -> Html {
html! {
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label r#for="picture">{"Picture"}</Label>
<Input id="picture" r#type="file" />
</div>
}
}
Disabled
use yew::prelude::*;
use crate::components::ui::input::Input;
#[function_component]
pub fn InputDisabled() -> Html {
html! {
<Input disabled=true r#type="email" placeholder="Email" />
}
}
use yew::prelude::*;
use crate::components::ui::input::Input;
#[function_component]
pub fn InputDisabled() -> Html {
html! {
<Input disabled=true r#type="email" placeholder="Email" />
}
}
With Label
use yew::prelude::*;
use crate::components::ui::{input::Input, label::Label};
#[function_component]
pub fn InputWithLabel() -> Html {
html! {
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label r#for="email">{"Email"}</Label>
<Input r#type="email" id="email" placeholder="Email" />
</div>
}
}
use yew::prelude::*;
use crate::components::ui::{input::Input, label::Label};
#[function_component]
pub fn InputWithLabel() -> Html {
html! {
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label r#for="email">{"Email"}</Label>
<Input r#type="email" id="email" placeholder="Email" />
</div>
}
}
With Text
use yew::prelude::*;
use crate::components::ui::{input::Input, label::Label};
#[function_component]
pub fn InputWithText() -> Html {
html! {
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label r#for="email-2">{"Email"}</Label>
<Input r#type="email" id="email-2" placeholder="Email" />
<p class="text-sm text-muted-foreground">{"Enter your email address."}</p>
</div>
}
}
use yew::prelude::*;
use crate::components::ui::{input::Input, label::Label};
#[function_component]
pub fn InputWithText() -> Html {
html! {
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label r#for="email-2">{"Email"}</Label>
<Input r#type="email" id="email-2" placeholder="Email" />
<p class="text-sm text-muted-foreground">{"Enter your email address."}</p>
</div>
}
}
With Button
use yew::prelude::*;
use crate::components::ui::{button::Button, input::Input};
#[function_component]
pub fn InputWithButton() -> Html {
html! {
<div class="flex w-full max-w-sm items-center space-x-2">
<Input r#type="email" placeholder="Email" />
<Button r#type="submit">{"Subscribe"}</Button>
</div>
}
}
use yew::prelude::*;
use crate::components::ui::{button::Button, input::Input};
#[function_component]
pub fn InputWithButton() -> Html {
html! {
<div class="flex w-full max-w-sm items-center space-x-2">
<Input r#type="email" placeholder="Email" />
<Button r#type="submit">{"Subscribe"}</Button>
</div>
}
}
Form
use yew::prelude::*;
// use crate::components::ui::input::Input;
#[function_component]
pub fn InputForm() -> Html {
html! {
// TODO
}
}
use yew::prelude::*;
// use crate::components::ui::input::Input;
#[function_component]
pub fn InputForm() -> Html {
html! {
// TODO
}
}