CogniSyncInput
An input is a single-line field for short text such as names, email, and search.
Every state covered
Default, hover, focus (selected), disabled, and error. Error either renders on its own (just a red border + alert icon) or paired with an inline error message.
Hover the field to see the border darken.
Click into the field. It gets a blue border and a soft glow.
Enter a valid email address.
Focus the field to see the error glow.
We couldn't verify this email.
Three sizes
Height, padding, icon size, and label type all scale together.
Size · Small
32px height, 13px text. Filters, inline edits, tables.
Size · Default
40px height, 14px text. The default for most forms.
Size · Large
48px height, 16px text. Hero forms, onboarding, log-in.
Label, description, required, optional
The label sits above the field; an optional description gives context below the label. Use `required` or `optional` to flag the field.
Leading, trailing, and clearable
Put a leading icon for context (search, email, lock) and a trailing icon for state. The clear button replaces the trailing icon when the field has a value.
Attached prefix & suffix
Put constant bits of the value outside the editable area so users only type the variable part.
With and without an attached CTA
Use the `cta` slot for single-line forms where the action belongs with the field \u2014 invites, copy-to-clipboard, search with a dedicated button.
Enter a complete email address.
Multi-line prompt field
A taller, pill-shaped cousin of Input made for AI chat. Auto-resizes as you type, pressing Enter submits (Shift+Enter adds a newline), and the send button animates between idle, active, and busy.
Press Enter to send, Shift + Enter for a new line.
Press the arrow to send. Try typing then hitting Enter.
Anatomy
An Input is composed of these parts.
Label
Geist Medium. Indicates what to type. Pair with required (*) or optional (pill) flags.
Description
Optional 13px #64748B line between label and field for context or short hints.
Shell
1px border container. Shifts to #94A3B8 on hover, #0D65FC with a glow on focus, #DC2626 on error.
Leading icon / addon
Inline context (icon) or constant text prefix (addon) pinned to the leading edge inside the shell.
Field
The actual <input>. 13/14/16px body text, transparent background, inherits padding from the shell.
Trailing controls
Clear button, password toggle, error icon, or trailing icon/addon — only one renders at a time.
CTA
Optional Button sitting outside the shell with an 8px gap, sharing the field's height.
Hint / error message
Small 13px line below the field. Error message replaces hint and adds an alert icon plus role=“alert”.
Do & Don't
Do
- Use a label for every input — never rely on placeholder alone.
- Show an error border and inline message when validation fails. Clear both as soon as the user fixes the problem.
- Match input size to the surrounding form (sm in filters, md in forms, lg in hero forms).
- Use the CTA slot for single-action flows (invite, copy, search) and place multi-action forms in a dedicated layout instead.
Don't
- Don't combine an error border with a blue focus glow — the component handles this for you.
- Don't stack a leading icon and a leading addon — pick one to keep the leading edge calm.
- Don't put long helper sentences inside placeholder text. Use the description or hint slot instead.
- Don't build chat experiences with Input — use ChatPrompt for multi-line, keyboard-driven prompting.