Input

The single-line input: three variants, seven sizes, composable everything else.

A single-line editor in themed chrome. Structure (labels, buttons, adornments) is COMPOSITION — nil-able Start/End slots and the Field wrapper; behavior (filters, transforms) is caller-owned functions. A file input is a native picker on the web — out of scope for a canvas UI, use your platform's file dialog ("from the web").

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add input

Usage

open demo ↗

var name lotusui.Input
name.LayoutField(th, gtx, "Email")

Disabled

Read-only, dimmed, no caret.

open demo ↗

name.Disabled = true

With label

Wrap any control in Field for the label.

open demo ↗

lotusui.Field(th, lotusui.FieldProps{Label: "Email"}, func(gtx C) D {
	return email.LayoutField(th, gtx, "you@example.com")
})

With button

An input beside a button is ordinary composition — a Flex row.

open demo ↗

layout.Flex{Alignment: layout.Middle}.Layout(gtx,
	layout.Flexed(1, func(gtx C) D { return email.LayoutField(th, gtx, "you@example.com") }),
	layout.Rigid(lotusui.HSpacer(th.Space.SM)),
	layout.Rigid(lotusui.Button(th, &sub, "Subscribe", lotusui.ButtonProps{Variant: lotusui.ButtonOutline})),
)

Variants

InputOutline (default), InputSubtle (filled, border on focus), InputFlushed (underline only).

open demo ↗

in.Variant = lotusui.InputSubtle
in.Variant = lotusui.InputFlushed

Sizes

All seven shared Size presets — text and padding move together.

open demo ↗

in.Size = lotusui.Size2XS // … through lotusui.Size2XL

Start and End elements

Widgets INSIDE the field, beside the editor — an icon, a clear ✕, a visibility eye. nil costs nothing.

open demo ↗

search.Start = lotusui.SVGIcon(lotusui.IconEye, 16, th.Palette.FgSubtle)
secret.End = lotusui.SVGIconButtonTint(th, &eyeBtn, lotusui.IconEyeOff, 16, false, th.Palette.FgSubtle)

// Masking is the editor's own: the eye toggles it.
secret.Editor.Mask = '•'
if reveal { secret.Editor.Mask = 0 }

Suffix addon

A fixed suffix rendered as part of the field's chrome.

open demo ↗

sub.LayoutSuffix(th, gtx, "Subdomain", "yourname", ".example.com")

Invalid

Error switches the chrome to danger and renders the message.

open demo ↗

in.Error = "this name is already taken"

Field — label, helper, required

The full wrapper is its own component — see Field for helper text, required markers and error slots around any control.

open demo ↗

lotusui.Field(th, lotusui.FieldProps{
	Label: "Email", Helper: "We'll never share it.", Required: true,
}, control)

Filter and Transform

Generic mechanisms for the app's rules: Filter is an allow-list, Transform a same-frame rewrite (here: fold to lowercase).

open demo ↗

in.Filter = "abcdefghijklmnopqrstuvwxyz0123456789-"
in.Transform = strings.ToLower

Clear button — composed

A clear button is just an End widget; the core knows nothing about it.

open demo ↗

if clearBtn.Clicked(gtx) { in.Editor.SetText("") }
in.End = lotusui.SVGIconButtonTint(th, &clearBtn, lotusui.IconRemove, 14, false, th.Palette.FgSubtle)

Character counter — composed

Cap length with Transform; the counter is Field.Helper, recomputed each frame.

open demo ↗

n := len(bio.Editor.Text())
lotusui.Field(th, lotusui.FieldProps{Label: "Bio", Helper: fmt.Sprintf("%d / 80", n)}, control)

Grid

Inputs side by side are a Flex row — each field takes an equal share.

open demo ↗

layout.Flex{}.Layout(gtx,
	layout.Flexed(1, firstNameField),
	layout.Rigid(lotusui.HSpacer(th.Space.MD)),
	layout.Flexed(1, lastNameField),
)

With badge

The label row is yours to compose — here a Beta badge beside the label.

open demo ↗

lotusui.HStack(th.Space.SM,
	lotusui.SectionLabel(th, "API token"),
	lotusui.Badge(th, "Beta", lotusui.BadgeProps{Variant: lotusui.BadgeSecondary, Size: lotusui.SizeXS}),
)

Field group

Stacked Fields in a Card read as one form section.

open demo ↗

lotusui.Card(th, lotusui.CardProps{}, lotusui.VStack(th.Space.MD,
	cityField, postalField,
))

Text addons

Muted text segments in the frame — a currency pair, a URL scheme and TLD — are Start/End widgets.

open demo ↗

amount.Start = addonText(th, "$")
amount.End = addonText(th, "USD")

Kbd

Kbd renders the keyboard-cap hint — compose it as the End slot.

open demo ↗

search.Start = lotusui.SVGIcon(lotusui.IconSearch, 16, th.Palette.FgSubtle)
search.End = lotusui.Kbd(th, "⌘K")

Spinner

open demo ↗

field.End = lotusui.Spinner(th, 14)

Inline button

A small icon button inside the frame — the copy-URL field.

open demo ↗

url.End = lotusui.SVGIconButtonTint(th, &copyBtn, lotusui.IconFile, 14, false, th.Palette.FgSubtle)

Block addons

Top/Bottom render full-width rows INSIDE the frame, above/below the editor line.

open demo ↗

name.Top = headerRow // a caption, a status row with actions

API

Option	Type	Description
`Variant`	`InputVariant`	InputOutline (default), InputSubtle, InputFlushed.
`Size`	`Size`	The shared size presets (Size2XS–Size2XL).
`Filter`	`string`	Allow-list of runes; empty accepts everything.
`Transform`	`func(string) string`	Same-frame rewrite — folds, caps, masks.
`Error`	`string`	Danger chrome + message below the field.
`Disabled`	`bool`	Read-only, dimmed, no caret.
`Start / End`	`layout.Widget`	Widgets inside the field, beside the editor; nil costs nothing.
`Editor`	`widget.Editor`	The underlying Gio editor — its own Mask (password dots), InputHint (mobile keyboard), MaxLen and selection API are yours to set directly.
`Top / Bottom`	`layout.Widget`	Full-width rows inside the frame — the block addons.
`Kbd(th, key)`	`widget`	The keyboard-cap hint, for End slots and prose.