Input
Single-line text entry.
You might be looking for:
- Textarea
Multi-line text entry.
- Number Input
Enter an amount — raw or formatted.
- Date Picker
Pick a calendar date from a popover.
Playground
<Input type="email" placeholder="Email" />Usage
import { Input } from "@sophic/portal-ui/components/ui/input";<Input type="email" placeholder="Email" />Tall
variant="tall" is the same height as Button
size="lg" (--button-height-lg). Use it when the field sits next
to a large button. A Field card still sets its own control height.
<Input variant="tall" placeholder="Email" />In app forms, Input is used inside the Field family with react-hook-form; the demo here is standalone.
Props
Prop
Type
Default
Input also accepts every native <input> attribute.
Tokens
Input reads --input-* when standalone and --field-control-* inside a Field
card. Fallbacks keep apps without those tokens on the previous look.
Changelog
-
3 October 2026 — Dark standalone fill and focus track Field (lifted fill, quieter focus edge). Full notes
-
3 October 2026 — Padding is
--spacing×--density; height is the line-box plus padding. Full notes -
29 September 2026 —
variant="tall"matches Buttonsize="lg"(44px). Full notes -
8 September 2026 — Standalone corners use 16px (
--radius-2xl) on product tokens. Full notes -
20 August 2026 — “You might be looking for” also maps to Date Picker. Full notes
-
19 August 2026 — “You might be looking for” map to Textarea and Number Input. Full notes
-
19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
-
22 July 2026 — Placeholder and value vertically centered again. Full notes
-
22 July 2026 — Soft standalone styling shared with Textarea / Select / Input Group. Full notes
-
14 July 2026 — Card-style Field wraps Input (label inside the card). Full notes