Fiord — Quartz / Forms

Input

Text input with label, placeholder, helper text, and error state.

View standalone →

Email address

Full name

This field is shown in a focused state.

Username

Username can only contain letters, numbers, hyphens, and underscores.

Account ID

Your account ID cannot be changed.

Textarea

Multiline text input with label, auto-resize affordance, and error state.

View standalone →

Bio Max 280 characters

Your bio will appear on your public profile.

Project description 312 / 300

Description must be 300 characters or fewer. Please shorten your text by 12 characters.

Select

Native select element with custom styled wrapper, label, and error state.

View standalone →

Country

Used for billing and tax purposes.

Subscription plan

You can upgrade or downgrade at any time. Compare plans

Checkbox

Styled checkbox with label, checked state, and indeterminate support.

View standalone →

Single

I agree to the terms of service By checking this box you confirm you have read and accept our Terms of Service and Privacy Policy.

Notification Preferences

Comments Get notified when someone comments on your posts.

Mentions Get notified when someone mentions you in a discussion.

Security alerts Get important alerts about your account security.

Checked & Disabled

Receive transactional emails Required for account notifications. Cannot be disabled.

Radio

Styled radio button group with label and selected state.

View standalone →

Subscription plan

Choose the plan that works best for you.

Monthly $12 / mo

Billed monthly. Cancel anytime.

Annual Save 20% $9.60 / mo

Billed as $115 per year.

Lifetime $299 once

One-time payment. All future updates included.

Team Coming soon $49 / mo

Up to 10 team members, shared workspace and billing.

Toggle

On/off switch with animated thumb and accessible checked state.

View standalone →

Email notifications

Receive updates and activity summaries by email.

Marketing emails

Receive product announcements, tips, and offers.

Security alerts

Critical alerts about your account. Always enabled.

Form Group

Composed form layout combining label, input, helper text, and validation error.

View standalone →

Input

Textarea

Select

Checkbox

Radio

Toggle

Form Group

Profile information