Forms & Inputs

Interactive form components and user inputs with Surfer design system styling

Button

Action triggers with Surfer design tokens

Variants

States

Sizes

With Icons

Icon Only

Pill Buttons

New pill-shaped buttons with Surfer design system

Pill Variants

Status Variants

Pill Sizes

Pill with Icons

Icon Only Pills

Input

Text input fields styled with Surfer design tokens

Textarea

Multi-line text input styled with Surfer design tokens

Label

Form labels styled with Surfer typography tokens

Email Address

Required Field *

Checkbox

Checkbox inputs styled with Surfer design tokens

Accept terms and conditions

Subscribe to newsletter

Disabled option

Radio Group

Radio button groups styled with Surfer design tokens

Option 1

Option 2

Option 3

Select

Dropdown selection styled with Surfer design tokens

Switch

Toggle switches styled with Surfer design tokens

Enable notifications

Auto-save

Disabled switch

Slider

Range sliders styled with Surfer design tokens

Volume: 50%

Range Slider

Disabled Slider

Input OTP

One-time password inputs styled with Surfer design tokens

Enter verification code

[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; } }

Form

Complete form layouts styled with Surfer design tokens

Full Name

Message