Input group
Ours in roman, yours in italic, on one line. The accent draws only under the part you type. Or your figure stands large with our words stacked beside it, or an arrow leads from your words to the action.
Report an issue with Input groupExample
halden.studio//brief
nights at the Halden housefrom Friday 14 November
Rest
halden.studio/
Focus
halden.studio/
Error
halden.studio/
Use letters, numbers and hyphens.
legend, one
nights at the housefrom 14 November
legend, focus
nights at the housefrom 14 November
arrow, empty
arrow, ready
arrow, pointed at
Disabled
halden.studio/
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base, button, and field along.
npx shadcn@latest add https://Usage
import { Field } from "@/components/ui/field"import { InputGroup, InputGroupButton, InputGroupInput, InputGroupText } from "@/components/ui/input-group"export default function Example() {return (<div className="grid w-full max-w-md gap-10"><Field label="Your project's address"><InputGroup><InputGroupText>halden.studio/</InputGroupText><InputGroupInput defaultValue="identity" autoComplete="off" /><InputGroupText>/brief</InputGroupText></InputGroup></Field><Field label="Invite someone"><InputGroup><InputGroupInput type="email" placeholder="name@studio.com" autoComplete="off" /><InputGroupButton type="submit">Send invite</InputGroupButton></InputGroup></Field><Field label="How long you'll stay"><InputGroup variant="legend"><InputGroupInput inputMode="numeric" defaultValue="3" maxLength={2} autoComplete="off" /><InputGroupText agree={{ one: "night", other: "nights" }}>at the Halden house</InputGroupText><InputGroupText>from Friday 14 November</InputGroupText></InputGroup></Field><Field label="Share the draft"><InputGroup variant="arrow"><InputGroupInput type="email" required placeholder="name@studio.com" autoComplete="off" /><InputGroupButton type="submit">Send</InputGroupButton></InputGroup></Field></div>)}Contract
- Underneath: native.
- Anatomy:
.ot-input-groupholding.ot-input-group-text(prefix), theinput, then optional suffix text or a quietot-btn. It sits inside anot-field. - Ours and yours on one line: the prefix and suffix stay upright in pencil, the typed part is italic between them. The accent line draws only under your part (the input is its anchor), from where you touched it.
- A suffix follows your words (the input is as wide as what's in it,
field-sizing: content), so an address reads as one phrase. A touch on the empty part of the line writes in the input. InputGroupTexttakesagree, the forms of a unit by plural category, and agrees with the number typed: 1 night, 3 nights.- Variant
legend(after the "28 December" calendar and the 14 / 08 of "the silence that heals"): your figure is set large, at--ot-ff, and our words stand stacked beside it in two small lines, the first in ink, the second in pencil. The input comes first. - Variant
arrow(after "It has to be design.": "Watch this space."): a hairline arrow (the group's::before, drawn by a mask) runs from your words to the action at the end. The shaft gives way as you write, inks once what you wrote is valid, and steps forward when you point at the action. It turns round right to left. - A search input draws no native clear mark, as in
ot-field. - States: rest, focus, error (
aria-invalid="true"), disabled.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
variant | "line" | "legend" | "arrow" | "line" | How ours and yours share the line. line: prefix, your words and suffix in reading order; a suffix follows your words. legend: your figure set large, with our words stacked beside it in two small lines, the first in ink, as in the "28 December" calendar. Put the input first. arrow: a hairline arrow runs from your words to the action at the end; the shaft gives way as you write, inks once what you wrote is valid, and steps forward when you point at the action. |
InputGroupText | ReactNode | What we supply, a prefix or a suffix, upright in pencil. | |
InputGroupText agree | { one?, few?, many?, other } | Forms of a unit that agree with the number typed, chosen by the page's plural rules: 1 night, 3 nights. The unit comes before the text's own words. | |
InputGroupInput | native | What you type, in italic. A real input; it takes a surrounding Field's id, hint and error. | |
InputGroupButton | Button props | variant="quiet" | An action at the end of the line. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Input group | "It has to be design." | Ours upright, yours italic, on one line |
| Legend input group | "28 December" dots; "the silence that heals" 14 / 08 | Your figure large, our words stacked beside it, the unit agreeing |
| Arrow input group | "It has to be design.": "Watch this space." | A hairline arrow from your words to the action |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Input group | From the touch | The accent line grows only under your part |
| Arrow input group | Give way | The shaft shortens as you write, inks when it's ready, and steps toward the action you point at |