Input

A text input component for forms and user data entry with built-in styling and accessibility features.

Your API key is encrypted and stored securely.

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

#[component]
pub fn InputExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <Input input_type="password" placeholder="sk-..." />
            <FieldDescription>"Your API key is encrypted and stored securely."</FieldDescription>
        </Field>
    }
}

Basic

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

#[component]
pub fn InputBasicExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <Input placeholder="Enter text" />
        </Field>
    }
}

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Username

Choose a unique username for your account.

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

#[component]
pub fn InputFieldExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <Input placeholder="Enter your username">"Username"</Input>
            <FieldDescription>"Choose a unique username for your account."</FieldDescription>
        </Field>
    }
}

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

Name

We'll send updates to this address.

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

#[component]
pub fn InputFieldGroupExample() -> impl IntoView {
    view! {
        <FieldGroup class="max-w-xs">
            <Field>
                <Input placeholder="Jordan Lee">"Name"</Input>
            </Field>
            <Field>
                <Input input_type="email" placeholder="name@example.com">
                    "Email"
                </Input>
                <FieldDescription>"We'll send updates to this address."</FieldDescription>
            </Field>
            <Field orientation="horizontal">
                <Button button_type="reset" variant="outline">
                    "Reset"
                </Button>
                <Button>"Submit"</Button>
            </Field>
        </FieldGroup>
    }
}

Disabled

Use the disabled prop to disable the input.

This field is currently disabled.

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

#[component]
pub fn InputDisabledExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs" disabled=true>
            <Input input_type="email" placeholder="Email">
                "Email"
            </Input>
            <FieldDescription>"This field is currently disabled."</FieldDescription>
        </Field>
    }
}

Invalid

Use the invalid prop to use invalid styling.

Invalid Input

This field contains validation errors.

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

#[component]
pub fn InputInvalidExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs" invalid=true>
            <Input placeholder="Error">"Invalid Input"</Input>
            <FieldDescription>"This field contains validation errors."</FieldDescription>
        </Field>
    }
}

File

Picture

Select a picture to upload.

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

#[component]
pub fn InputFileExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <Input input_type="file">"Picture"</Input>
            <FieldDescription>"Select a picture to upload."</FieldDescription>
        </Field>
    }
}

Inline

Use a horizontal Field to create an inline input. Pair with a Button to create a search input with a button.

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

#[component]
pub fn InputInlineExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs" orientation="horizontal">
            <Input placeholder="Search..." />
            <Button>"Search"</Button>
        </Field>
    }
}

Grid

Use a grid layout to place multiple inputs side by side.

First Name

Last Name

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

#[component]
pub fn InputGridExample() -> impl IntoView {
    view! {
        <FieldGroup class="grid max-w-sm grid-cols-2">
            <Field>
                <Input placeholder="Jordan">"First Name"</Input>
            </Field>
            <Field>
                <Input placeholder="Lee">"Last Name"</Input>
            </Field>
        </FieldGroup>
    }
}

Required

Use the required prop to indicate required fields.

Required Field *

This field must be filled out.

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

#[component]
pub fn InputRequiredExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs" required=true>
            <Input placeholder="This field is required">"Required Field"</Input>
            <FieldDescription>"This field must be filled out."</FieldDescription>
        </Field>
    }
}

Badge

Use a Badge in the label to highlight a recommended field.

Webhook URL Beta

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

#[component]
pub fn InputBadgeExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <FieldLabel>
                "Webhook URL " <Badge variant="secondary" class="ml-auto">
                    "Beta"
                </Badge>
            </FieldLabel>
            <Input input_type="url" placeholder="https://api.example.com/webhook" />
        </Field>
    }
}

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component.

Website URL

https://

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

#[component]
pub fn InputInputGroupExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <FieldLabel>Website URL</FieldLabel>
            <InputGroup>
                <Input placeholder="example.com" />
                <InputGroupAddon>
                    <InputGroupText>"https://"</InputGroupText>
                </InputGroupAddon>
                <InputGroupAddon align="inline-end">{icon!(icondata::LuInfo)}</InputGroupAddon>
            </InputGroup>
        </Field>
    }
}

Button Group

To add buttons to an input, use the ButtonGroup component.

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

#[component]
pub fn InputButtonGroupExample() -> impl IntoView {
    view! {
        <Field class="max-w-xs">
            <FieldLabel>"Search"</FieldLabel>
            <ButtonGroup>
                <Input placeholder="Type to search..." />
                <Button variant="outline">"Search"</Button>
            </ButtonGroup>
        </Field>
    }
}

Form

A full form example with multiple inputs, a select, and a button.

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

#[component]
pub fn InputFormExample() -> impl IntoView {
    view! {
        <form class="w-full max-w-sm">
            <FieldGroup>
                <Field>
                    <Input input_type="text" placeholder="Evil Rabbit">
                        "Name"
                    </Input>
                </Field>
                <Field>
                    <Input input_type="email" placeholder="john@example.com">
                        "Email"
                    </Input>
                    <FieldDescription>"We'll never share your email with anyone."</FieldDescription>
                </Field>
                <div class="grid grid-cols-2 gap-4">
                    <Field>
                        <Input input_type="tel" placeholder="+1 (555) 123-4567">
                            "Phone"
                        </Input>
                    </Field>
                    <Field>
                        <FieldLabel>Country</FieldLabel>
                        <Select default="us">
                            <SelectOption value="us">"United States"</SelectOption>
                            <SelectOption value="uk">"United Kingdom"</SelectOption>
                            <SelectOption value="ca">"Canada"</SelectOption>
                        </Select>
                    </Field>
                </div>
                <Field>
                    <Input input_type="text" placeholder="123 Main St">
                        "Address"
                    </Input>
                </Field>
                <Field orientation="horizontal">
                    <Button button_type="button" variant="outline">
                        "Cancel"
                    </Button>
                    <Button>"Submit"</Button>
                </Field>
            </FieldGroup>
        </form>
    }
}

Anatomy

Import all parts and piece them together.

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

#[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

Basic

Field

Field Group

Disabled

Invalid

File

Inline

Grid

Required

Badge

Input Group

Button Group

Form

Anatomy

API Reference

Input