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::*;

#[component]
pub fn InputExample() -> impl IntoView {
    view! {
        <FieldSet>
            <Field>
                <Input input_type="color" default="#F00">
                    "Color:"
                </Input>
            </Field>

            <Field>
                <Input input_type="date">"Date:"</Input>
            </Field>

            <Field>
                <Input input_type="datetime-local">"Datetime:"</Input>
            </Field>

            <Field>
                <Input input_type="email">"Email:"</Input>
            </Field>

            <Field>
                <Input input_type="file">"File:"</Input>
            </Field>

            <Field>
                <Input input_type="hidden" name="John Cena" />
            </Field>

            <Field>
                <Input input_type="month">"Month:"</Input>
            </Field>

            <Field>
                <Input input_type="number">"Number:"</Input>
            </Field>

            <Field>
                <Input input_type="password">"Password:"</Input>
            </Field>

            <Field>
                <Input input_type="search">"Search:"</Input>
            </Field>

            <Field>
                <Input input_type="tel">"Phone Number:"</Input>
            </Field>

            <Field disabled=true>
                <Input input_type="text">"Disabled:"</Input>
            </Field>

            <Field invalid=true>
                <Input input_type="text">"Invalid:"</Input>
            </Field>

            <Field>
                <Input input_type="time">"Time:"</Input>
            </Field>

            <Field>
                <Input input_type="url">"URL:"</Input>
            </Field>

            <Field>
                <Input input_type="week">"Week:"</Input>
            </Field>
        </FieldSet>
    }
}

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	String	""	A reactive signal coupled to the input's value.

Implements global and input attributes.

Getting Started

Components

Input

Anatomy

API Reference

Input