InputOTP

The one-time-code input: attached character slots, one hidden editor.

Click anywhere on the row, type or paste — the code fills left to right, and the active slot carries the focus ring. One editor drives every slot, so paste and backspace behave exactly like a text field.

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-otp

Usage

open demo ↗

var code lotusui.InputOTP // six slots by default

code.Layout(th, gtx)
value := code.Value()

Separator

Groups splits the slots with a dash between groups.

open demo ↗

code := lotusui.InputOTP{Groups: []int{2, 2, 2}}

Length

open demo ↗

code := lotusui.InputOTP{Length: 4}

Pattern

Filter is the allow-list — digits only for numeric codes.

open demo ↗

code := lotusui.InputOTP{Filter: "0123456789"}

Disabled

open demo ↗

code.Disabled = true

Invalid

Invalid renders danger borders; pair it with a Field error.

open demo ↗

code.Invalid = true

API

Option	Type	Description
`Length`	`int`	Slot count; zero means 6.
`Groups`	`[]int`	Slots per group, a dash between groups.
`Filter`	`string`	Allow-list; empty accepts everything.
`Disabled / Invalid`	`bool`	Dimmed and inert; danger borders.
`Value() / SetValue(s)`	`method`	The code typed so far.