Inputs
Input
Search fields with a leading icon, chat composers with a send action and plain labelled text inputs.
Source captures·from the SEED early-access trailer
Text field
Gray well with a white rim while focused; disabled fields dim.
Lobby starts once this many players join.
Name is already taken.
Search
Leading magnifier and a clear button once you type. Filters the society list live.
- Forgotten Bristvale 1/6Settlement
- Crimson Vale 0/5Town
- Grand Summerwood 0/6Town
- Sacred Sungrove 0/7Settlement
- Advocates 5/13City
- The Clunkers 1/7Town
- Towering Silverwood 0/0Metropolis
Toolbar search
A flush search bar sharing its row with an inline sort select.
Chat composer
Enter sends and clears; the paper plane is disabled while empty.
well done chopping wood, do you like it?
HUD chat bar
Glass field with a channel switcher on the left and an expand action outside.
Variants & sizes
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "filled" | "outline" | "glass" | "ghost" | "filled" | |
| size | "sm" | "default" | "lg" | "default" | |
| leading / trailing | ReactNode | — | Icon or FieldButton slots. |
| fieldClassName | string | — | Classes for the outer wrapper (width, flex). |
| SearchInput.onValueChange | (value: string) => void | — | |
| SearchInput.clearable | boolean | true | |
| ChatInput.onSend | (message: string) => void | — | |
| Field | { label, htmlFor?, hint? } | — | Label + control + hint stack. |