Inputs

Form input components and states

Text inputs, selects, textareas, checkboxes, radios. States: default, focus, error, disabled. Used in hero form, CTA form, and throughout sections.

Design Structure

• .field, .field-label, .field-input — Field wrapper
• .input, .input-wrap, .input-icon — Input with icons
• .input states: .is-focus, .is-filled, .is-error, .is-success, .is-disabled
• .input-group, .input-addon — Prefix/suffix
• .textarea, .select
• .checkbox-wrap, .radio-wrap, .toggle-wrap
• .field-helper, .field-error, .field-success, .char-count
• Icons: alert (error), ok-circle (success), mail (email), eye (password), close (clear), chevron-down/up (select), arrow-right (links)

Live Preview

Usage

Include tokens.css and components.css. Form elements are used in hero form, CTA form, and contact sections.