7onicDESIGN SYSTEM

Input

Input is a basic form element for collecting text data from users. Supports various text input types including email, password, and search.

2
Variants
5
Sizes
2
Icon Slot
Field
Field

Playground

Preview
defaultD
Variant
Size
Radius
Icon
State
Field
Focus
<Input placeholder="Type here..." />

Variants

Default
Standard border — for general form inputs
General forms
Filled
Filled background — for high-emphasis inputs
Search bar, Primary input

Sizes

xs
Height36px
H-Padding12px
Font13px
Icon14px
sm
Height40px
H-Padding12px
Font14px
Icon14px
default
Height44px
H-Padding16px
Font16px
Icon16px
lg
Height48px
H-Padding16px
Font16px
Icon16px
xl
Height56px
H-Padding16px
Font16px
Icon16px

Touch target: WCAG 2.5.8 requires a minimum 24px touch area. Even the smallest xs (36px) meets the WCAG standard.

iOS Safari: Font size 16px+ prevents auto-zoom on iOS Safari. Sizes default and above use 16px font and 16px icons.

Features

With Icons

<Input leftIcon={<Search />} placeholder="Search..." />
<Input rightIcon={<Mail />} placeholder="Email address" />
<Input leftIcon={<Lock />} rightIcon={<Eye />} type="password" placeholder="Password" />

States

DefaultNormal

0/50

ErrorError
DisabledDisabled

Focus States

focusRing: false (default): Border change only on click, focus ring auto-shown on keyboard Tab. focusRing: true: Always show focus ring.

API

Props

variant"default"
"default" | "filled"

Input visual style

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

Input height (36/40/44/48/56px) - Input-specific scale

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

Border radius size (6px)

leftIconundefined
ReactNode

Left icon

rightIconundefined
ReactNode

Right icon

focusRingfalse
boolean

Show custom focus ring. Keyboard-only focus ring shown even when false

errorundefined
boolean

Error state (red border)

disabledundefined
boolean

Disabled state

placeholderundefined
string

Placeholder text

typeundefined
string

Input type (text, email, password, etc.). HTML default: text

Field

errorfalse
boolean

Error state. Auto-propagates to Field.Error and Input

disabledfalse
boolean

Disabled state. Auto-propagates to Field.Label and Input

gap"default"
"none" | "xs" | "sm" | "default" | "lg"

Gap between child elements (0 / 4 / 6 / 8 / 12px)

Field.Label

requiredfalse
boolean

Show required mark (*) at end of label

Anatomy

1
2
Email address
4
3
user@example.com
5
6
Please enter a valid email address
1
Field
Field wrapper
2
Label
Label
3
Input Area
Text input
4
Left Icon
Left icon (optional)
5
Right Icon
Right icon (optional)
6
Helper Text
Helper text (optional)

Best Practices

✓

Recommended

  • ✓Always add a label (or aria-label)
  • ✓Use appropriate input type (email, tel, etc.)
  • ✓Show clear feedback on error
  • ✓Ensure sufficient touch area (WCAG 2.5.8: 24px+)
✕

Avoid

  • ✗Don't use placeholder as a label substitute
  • ✗Don't disable autocomplete unnecessarily
  • ✗Ensure errors aren't indicated by color alone
  • ✗Clearly state input restrictions upfront

Accessibility

Keyboard

TabMove focus
EnterSubmit form
EscCancel input

WCAG 2.2 Compliance

  • Focus indicator
  • aria-invalid (on error)
  • autocomplete support
  • Contrast ratio 4.5:1 or higher