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.
Chip Input
Tag-style multi-value input. Type a value and press Enter or , to add a chip. Press Backspace on an empty input to remove the last chip.
Structure: .across-chip-input wraps .across-chip elements and
a .across-chip-input__field input.
Events: across:chip-add and across:chip-remove fire on the
container with detail.value.
Chip Variants
Standalone chips for labels, tags, and filters. Color variants map to the design-token palette.
Modifiers: .across-chip--work, .across-chip--look,
.across-chip--share, .across-chip--brand, .across-chip--selected.
Number Input
Numeric stepper with increment and decrement buttons. Supports data-min,
data-max, and data-step attributes.
Structure: .across-number-input >
.across-number-input__btn[data-action] + .across-number-input__field.
Date Range Picker
Paired date inputs for selecting a start and end date. Wraps standard .across-input fields.
Structure: .across-date-range wraps two .across-input date
fields with a .across-date-range__separator.
Color Input
Color picker with a visual swatch and a text input for hex values. The two stay synced automatically.
Structure: .across-color-input >
.across-color-input__swatch + .across-color-input__text.
File Upload
Drag-and-drop file upload zone with a file list. Click the zone or drag files onto it.
Structure: .across-file-upload > .across-file-upload__zone
+ .across-file-upload__list.