Forms & Input
Inputs, selects, textareas, labels, and composite fields.
Input
Form inputs with Wing-inspired focus states and size options.
<input type="text" class="across-input" placeholder="Enter text...">
<input type="text" class="across-input input--sm" placeholder="Small">
<input type="text" class="across-input input--lg" placeholder="Large">Textarea
Multi-line text input with auto-resize, char counts, and validation states.
Sizes: .across-textarea--sm, default, .across-textarea--lg
States: .is-valid, .is-error, disabled
Modifiers: .across-textarea--no-resize disables resizing
Select
Custom-styled native dropdown select with consistent theming.
Structure: Wrap <select> in .across-select with icon
Sizes: .across-select--sm, default, .across-select--lg
States: .is-valid, .is-error, .is-disabled
Label
Form labels with required/optional indicators and consistent typography.
Base: .across-label typography
Required: .across-label--required adds red asterisk
Optional: .across-label--optional adds indicator
Disabled: .is-disabled reduces opacity
Form Field
Composite wrapper combining label, input, helper text, and validation.
Structure: .across-field wraps label, input, helper
Fieldset: .across-fieldset groups related fields
Layout: .across-field--horizontal for inline label + control
Helpers: Use .across-input-helper--success and .across-input-helper--error
Input Group
Extend form controls by adding text, buttons, or icons on either side.
Structure: Wrap elements in .across-input-group.
Addons: Use .across-input-group-text for static text/icons.
Buttons: Buttons inside the group automatically attach to the input.
Combobox
Searchable dropdown for selecting from a large list of options.
<div class="across-combobox">
<button class="across-combobox__trigger">
<span>Select item...</span>
<i class="ph-light ph-caret-down"></i>
</button>
<div class="across-combobox__menu">
<div class="across-combobox__search">
<input type="text" class="across-combobox__input" placeholder="Search...">
</div>
<div class="across-combobox__list">
<button class="across-combobox__item">Option 1</button>
<button class="across-combobox__item">Option 2</button>
</div>
</div>
</div>Date Picker
A calendar-based date selection input.
Structure: .across-datepicker > .across-datepicker__trigger > .across-datepicker__calendar.
Interaction: JS automatically renders the calendar grid and handles selection.
Data: Use data-selected-date="YYYY-MM-DD" to set initial value.
Input OTP
A set of inputs for entering one-time passwords or verification codes.
Structure: .across-otp > .across-otp__input.
Interaction: JS handles auto-focus, backspace navigation, and pasting.
Slider
An input where the user selects a value from within a given range.
Structure: .across-slider > input[type="range"].across-slider__input.
Styling: Uses browser-specific pseudo-elements to style the track and thumb.
Toggle Group
A set of two-state buttons that can be toggled on or off.
Structure: .across-toggle-group > .across-toggle-group__item.
Interaction: JS handles selection state. Use data-type="single" or "multiple" on the container.
Native Select
A styled wrapper around the native browser select element.
Structure: .across-native-select > select + .across-native-select__icon.
Usage: Use when you need native mobile pickers or simple dropdowns without search.
Calendar
A date field component that allows users to enter and edit date.
Structure: .across-calendar-view.
Interaction: JS automatically renders the grid. Use data-selected-date for initial state.
Form Container
A structured container for forms with header, body, and actions.
Structure: .across-form > .across-form__header + fields + .across-form__actions
Kbd
Used to display keyboard shortcuts.
Structure: .across-kbd.