Forms

Text Input States

All input states from Figma Design System

Default
Focus / Typing
Filled
Error (placeholder)
Error (filled)
Disabled
<input type="text" class="xcart-input" placeholder="Enter"> <input type="text" class="xcart-input" value="Filled"> <input type="text" class="xcart-input error" placeholder="Error"> <input type="text" class="xcart-input" disabled>

Selector States

Dropdown selectors with all states

Default
Focus
Filled
Error
Disabled
<select class="xcart-select">...</select> <select class="xcart-select error">...</select> <select class="xcart-select" disabled>...</select>

Input Sizes

Small (32px), Default (40px), Large (48px)

Small (32px)
Default (40px)
Large (48px)
<input class="xcart-input xcart-input-sm" ...> <input class="xcart-input" ...> <input class="xcart-input xcart-input-lg" ...>

Horizontal Form Layout

Label (250px, right-aligned) + Input with 20px gap

Helper text goes here
<div class="xcart-form-horizontal"> <div class="xcart-form-group"> <label class="xcart-form-label">Label</label> <div class="xcart-form-field"> <input type="text" class="xcart-input" ...> </div> </div> </div>

Special Inputs

Date picker and inputs with icons

Date Picker
Date Picker (error)
Search Input
Input with Info Icon
<!-- Date Picker --> <div class="xcart-datepicker"> <i class="fas fa-calendar"></i> <input type="text" class="xcart-input" value="04/12/2024"> </div> <!-- Input with Info Icon --> <div class="xcart-input-with-info"> <input type="text" class="xcart-input" ...> <i class="fas fa-info-circle xcart-input-info-icon"></i> </div>

Textarea

Multi-line text input

Default
Error
<textarea class="xcart-textarea" rows="4"></textarea> <textarea class="xcart-textarea error"></textarea>

Checkboxes & Radio

Selection controls

Checkboxes (Figma)

Standalone (Tables)

Hover to see blue glow effect

Radio Buttons (Figma)

<!-- Checkbox with label --> <label class="xcart-checkbox-custom"> <input type="checkbox" checked> <span class="xcart-checkmark"></span> Checked option </label> <!-- Radio button with label --> <label class="xcart-radio-custom"> <input type="radio" name="group" value="1" checked> <span class="xcart-radiomark"></span> Selected option </label> <!-- Using Twig macro --> {% import "partials/checkbox.twig" as form %} {{ form.checkbox('agree', 'I agree', true) }} {{ form.radio('payment', 'card', 'Credit Card', true) }} {{ form.radio('payment', 'paypal', 'PayPal', false) }}

Toggle Switch

On/Off toggle for settings

<label class="xcart-toggle"> <input type="checkbox" checked> <span class="xcart-toggle-slider"></span> <span class="xcart-toggle-label">Label</span> </label>

CSS Classes Reference

Class Description
.xcart-input Base input class (40px height, 4px radius, #ABABAB border)
.xcart-input-sm Small input (32px height)
.xcart-input-lg Large input (48px height)
.xcart-input.error Error state (red border + shadow)
.xcart-select Dropdown select with arrow
.xcart-textarea Multi-line textarea
.xcart-form-horizontal Horizontal layout (label 250px right-aligned)
.xcart-form-group Form field wrapper
.xcart-form-label Field label (16px)
.xcart-form-field Input container in horizontal layout
.xcart-form-helper Helper text (12px, gray)
.xcart-form-error Error message (12px, red)
.xcart-required Required field marker (*)
.xcart-datepicker Date picker wrapper
.xcart-input-with-info Input with info icon
.xcart-checkbox Checkbox with label
.xcart-radio Radio button with label
.xcart-toggle Toggle switch wrapper

Design Specifications

From Figma Design System

Input Styles

  • Height: 40px (default)
  • Border-radius: 4px
  • Border: 1px solid #ABABAB
  • Padding: 5px 10px
  • Font: Open Sans 16px

Focus State

  • Border: #2274A6
  • Shadow: 0 0 10px rgba(34,116,166,0.5)

Error State

  • Border: #BB1F34
  • Shadow: 0 0 10px rgba(187,31,52,0.5)

Horizontal Layout

  • Label width: 250px
  • Label align: right
  • Gap: 20px