Input

Displays a form input field.

Color:Date:Datetime:Email:File:Month:Number:Password:Search:Phone Number:Disabled:Invalid:Time:URL:Week:

use leptos::prelude::*;
use singlestage::input::*;

#[component]
pub fn InputExample() -> impl IntoView {
    view! {
        <div>
            <Input input_type="color" default="#F00">
                "Color:"
            </Input>
            <Input input_type="date">"Date:"</Input>
            <Input input_type="datetime-local">"Datetime:"</Input>
            <Input input_type="email">"Email:"</Input>
            <Input input_type="file">"File:"</Input>
            <Input input_type="hidden" name="John Cena" />
            <Input input_type="month">"Month:"</Input>
            <Input input_type="number">"Number:"</Input>
            <Input input_type="password">"Password:"</Input>
            <Input input_type="search">"Search:"</Input>
            <Input input_type="tel">"Phone Number:"</Input>
            <Input input_type="text" disabled=true>
                "Disabled:"
            </Input>
            <Input input_type="text" invalid=true>
                "Invalid:"
            </Input>
            <Input input_type="time">"Time:"</Input>
            <Input input_type="url">"URL:"</Input>
            <Input input_type="week">"Week:"</Input>
        </div>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::Input;

#[component]
pub fn InputAnatomy() -> impl IntoView {
    view! { <Input /> }
}

API Reference

Input

A form input field.

Custom Attributes
Name	Type	Default	Description
default	String	""	Sets the default value of the element. Setting `value` sets this once at page load. Use this for subsequent updates.
input_type	String	""	Renamed <input> `type` attribute to avoid name collisions.
invalid	bool	false	Toggle whether or not the input is disabled.
value	Reactive<String>	""	A reactive signal coupled to the input's value.

Implements global and input attributes.