Singlestage UI

v0.5.0

Getting Started

Components

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

Input

Choose a unique username for your account.

Must be at least 8 characters long.

Textarea

Share your thoughts about our service.

Select

Select your department or area of work.

Slider

Price Range

Set your budget range ($0 - $0).

Fieldset

Address Information

We need your address to deliver your order.

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Switch

Choice Card

Use the button variant to create selectable field buttons. This works with Radio, Checkbox and Switch components.

Compute Environment

Select the compute environment for your cluster.

Field Group

Stack Field components with FieldGroup. Add Separator to divide them.

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Get notified when tasks you've created have updates. Manage tasks

Responsive Layout

Profile

Fill in your profile information.

Provide your full name for identification

You can write your message here. Keep it short, preferably under 100 characters.

Errors

Anatomy

Import all parts and piece them together.

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

#[component]
pub fn FieldAnatomy() -> impl IntoView {
    view! {
        <FieldSet>
            <FieldLegend />
            <FieldDescription />
            <FieldGroup>
                <Field>
                    <FieldLabel />
                    <FieldError />
                    <Input />
                    <FieldDescription />
                </Field>
            </FieldGroup>
            <FieldSeparator />
            <FieldGroup>
                <Field>
                    <FieldLabel>
                        <FieldContent>
                            <FieldTitle />
                            <FieldDescription />
                        </FieldContent>
                    </FieldLabel>
                    <Checkbox />
                </Field>
            </FieldGroup>
        </FieldSet>
    }
}

API Reference

Field

The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.

Custom Attributes
NameTypeDefaultDescription
orientationString"vertical"

Sets the display orientation. Accepted values: "vertical" | "horizontal" | "responsive".

variantString""

Sets the display variant of the Field. Accepted values: "button".

Implements global attributes.

FieldContent

Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.

Implements global attributes.

FieldDescription

Helper text slot that automatically balances long lines in horizontal layouts.

Implements global attributes.

FieldError

Accessible error container that accepts children or a reactive list of errors.

Custom Attributes
NameTypeDefaultDescription
errorsVec<String>[]

A reactive list of errors to display.

Implements global attributes.

FieldGroup

Layout wrapper that stacks Field components and enables queries for responsive orientations.

Implements global attributes.

FieldLabel

A styled label associated with the input for a Field.

Custom Attributes
NameTypeDefaultDescription
label_forString""

Renamed <label> `for` attribute to avoid name collisions.

Implements global attributes.

FieldLegend

Legend element for a FieldSet. Use the label variant to align with label sizing.

Custom Attributes
NameTypeDefaultDescription
variantString"legend"

Set the display style of the FieldLegend. Accepted values: "label" | "legend".

Implements global attributes.

FieldSeparator

Visual divider to separate sections inside a FieldSet. Accepts optional inline content.

Implements global attributes.

FieldSet

Container that renders a semantic fieldset with spacing presets.

Implements global and fieldset attributes.

FieldTitle

Renders a title with label styling.

Implements global attributes.