Skip to content
CroStreamUI kit

Forms

Labelled fields with hints and errors, text and number entry, choices, switches and sliders.

01Field

Field

A label, the control, a hint and room for an error. Field owns the ids, so the control inside is labelled, described and marked invalid with no extra wiring.

Anatomy Label, required marker, hint, error. The error region is polite-live, so it's announced when it appears.

What viewers type in chat, without the !.

Shown on the channel point reward.

Label options Optional instead of required; an aside on the label row; a visually hidden label.
Optional
How it works

We POST the event as JSON.

02Input

Input

Single-line text in a sunken well: icons, prefixes and suffixes inside the edge, a clear button, a password reveal, and autofill that stays on-theme.

Types and adornments
Sizes Built on the control-height tokens, so compact density applies by itself.
States Invalid adds an edge, a soft ring and (inside a Field) an icon and words. Disabled is outlined and readable. Read-only drops the well.

One word, no spaces.

03Textarea

Textarea

Grows with what's typed, up to a limit, then scrolls. The counter warns visually near the limit and tells screen readers only at the thresholds that matter.

Auto-grow with counter maxlength 140; turns amber at 14 left, red at 0.

Variables like {user.name} are filled in when it's sent.

States
Optional

The reply can't be empty.

04NumberInput

NumberInput

Numbers with − and + steppers. Arrow keys step, Shift or Page keys take big steps, Home/End jump to the limits, and holding a stepper accelerates.

Units and steps Tabular figures, right-aligned against the unit. Values snap to the step on commit.

0 to 600 seconds.

Sizes and states Steppers disable themselves at the limits.

Empty is allowed: value is null.

Must be at least 1.

Scrub and commit Drag a prefix sideways to scrub (Shift for big steps, Alt for fine ones). Live steps preview; one commit per gesture, so an editor records one undo step. Escape puts typed text back.
  1. Scrub, type or step a value.

05InlineEdit

InlineEdit

A name you change where it stands: click it, press Enter or F2, type, and press Enter or click away. Escape puts it back; a failed save keeps the field open with the reason.

As a title Looks like text until you need it. The pencil shows on hover and focus, and always on touch.

1920 × 1080 · 12 elements

In a row Inherits the row's type; the field lines up exactly with the text it replaces.
Clip
Async save that can fail Try “Gameplay”: the save is refused, the field stays open with the reason, and the old name is safe.
Validation and empty Rules run before saving. An empty name reverts unless empty is allowed.

06PinInput

PinInput

Short codes typed one box at a time: pairing codes, one-time codes. It's one real field underneath, so it has one name, pastes “482 913” in one go, works with one-time-code autofill, and Backspace and the arrow keys behave as usual.

In a Field Type or paste the code shown on the streaming PC (try 482913). It checks itself once the last digit is in.
6 digits

Shown on your streaming PC under Settings → Companion.

Sizes and characters Letters are upper-cased as they're typed or pasted. Masked codes show dots and are marked as a password.
4 characters

Four letters or numbers.

4 digits
Invalid Every box takes the error edge; the message comes from the Field and is linked to the field.
6 digits

This code expired. Ask for a new one.

Disabled Dashed edges in High contrast, like every disabled control.
6 digits

07Checkbox

Checkbox

On, off or mixed. The tick draws itself in, the mixed bar grows from the centre, and the whole row is the click target.

Group with a mixed parent The parent shows mixed when some children are on; clicking it sets them all.
States and sizes Disabled keeps its label readable and gets a dashed box in High contrast.
In a Field A required agreement: the Field's error is announced and linked.
Before you go live

Tick this to continue.

08RadioGroup

RadioGroup

One choice from a short list. Arrow keys move and select; the description is linked, not read as part of the name.

Default
Send the reply to
Horizontal, small, invalid
Icon size
Pick one

Choose where alerts appear.

Disabled
Card variant For choices that deserve a sentence each. The selected card gets a soft fill, an accent edge and a filled dot.
When the trigger fires again while running

09Switch

Switch

On or off, effective immediately. The thumb travels on a spring and stretches while pressed; High contrast adds a tick inside the thumb.

Settings list labelPosition='start': label and switch spread apart.
States and sizes

10Slider

Slider

One value or a range. The thumb grows while dragged and shows its value; arrow, Page and Home/End keys all work, and the readout never jitters.

Single and range Range thumbs are named 'minimum' and 'maximum' for screen readers.
Alert volume
Clip window

Seconds before and after the moment.

Steps, ticks and states
Animation speed
Overlay opacity
Disabled

11Segmented

Segmented

A few mutually exclusive views or modes. One selected surface slides between segments on a spring; selected text goes semibold without changing any segment's width.

With icons and icon-only Icon-only segments keep their label as the accessible name and tooltip.
Sizes, block and states

12Example: a new trigger

Example: a new trigger

The whole group composed into the form the app actually needs, at both densities. Empty the command and save to see validation.

Comfortable vs compact Compact is the app's working density: same form, tighter rhythm, still never under 24px targets.
comfortable

New trigger

Fires on

What viewers type, without the !.

Optional
Sound volume
compact

New trigger

Fires on

What viewers type, without the !.

Optional
Sound volume

13TemplateInput

TemplateInput

Text that may hold {variable} tokens. They show as chips (unknown ones in the warning tone), typing { opens a completion list of the variables on offer, and Ctrl+Space or the { } button open it anywhere. Underneath it is a plain input or textarea, so selection, IME and undo are native.

Single line Type { and pick with the arrow keys and Enter. The list filters as you type; Escape closes it without closing a dialog around it. The list floats above cards and dialogs (fixed, flipping above when short of room), and Enter or Tab during an IME composition confirm the composition, not a variable.

Sent when someone cheers.

Multiline Grows with its text between rows and maxRows, then scrolls. The dashed token is a variable some runs won't have.
Unknown variable {usr} is not on offer, so it is flagged. isKnown accepts names the list can't know, such as row.* in a loop.

The warning chip is a hint, not an error.

No variables Without variables it is a plain text field: no chips flagged, no insert button.
Invalid aria-invalid with the error edge; the message comes from the Field.

Close the { with a }.

Disabled and read-only Disabled drops the insert button and dashes the edge in High contrast.