Back to catalog

Product UI Kit

Product Field Controls

CoastKey product text-entry wrappers, textarea, input group, search field/search panel field, OTP, helper/error, and field visual states.

Text input states

Rest

Hover

Focus

Active

Invalid

Disabled

ProductTextInput

Textarea states

Rest

Hover

Focus

Active

Invalid

Disabled

ProductTextareaField

Input group and search field

Discovery

Search field

Discovery input

Search panel

Field size scale

M

L

XL

One-time password

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

2

4

7

9

1

0