Semantic structure
Labels must be programmatically associated with form controls.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Interactions / Component reference
Input tools
Text counters, reveal-password controls and select-all checkboxes.
LIVE COMPONENT REFERENCE
Input and field variants
Real native controls retain platform keyboard, selection, validation and autofill behavior. Every control should have an associated label.
Actual Xshna CSSResize to test wrapping
HTML · COPY AND USE
<div class="xsh-ref-formgrid"><label class="xsh-field"><span class="xsh-label">Text field</span><input class="xsh-input" type="text" placeholder="Text field" ></label><label class="xsh-field"><span class="xsh-label">Email address</span><input class="xsh-input" type="email" placeholder="Email address" autocomplete="email"></label><label class="xsh-field"><span class="xsh-label">Password</span><input class="xsh-input" type="password" placeholder="Password" autocomplete="new-password"></label><label class="xsh-field"><span class="xsh-label">Search</span><input class="xsh-input" type="search" placeholder="Search" ></label><label class="xsh-field"><span class="xsh-label">Disabled field</span><input class="xsh-input" type="text" placeholder="Disabled field" disabled></label><label class="xsh-field"><span class="xsh-label">Choose a plan</span><select class="xsh-select"><option>Starter</option><option>Enterprise</option></select></label><label class="xsh-field"><span class="xsh-label">Message</span><textarea class="xsh-textarea" rows="3" placeholder="Write a message"></textarea></label></div>LIVE COMPONENT REFERENCE
Selections and input states
Native checkbox, radio, range, progress and toggle primitives with accessible names.
Actual Xshna CSSResize to test wrapping
HTML · COPY AND USE
<div class="xsh-ref-flex"><label><input class="xsh-checkbox" type="checkbox" checked> Email updates</label><label><input class="xsh-radio" type="radio" name="xsh-doc-plan" checked> Monthly</label><label><input class="xsh-radio" type="radio" name="xsh-doc-plan"> Yearly</label><label class="xsh-switch"><input type="checkbox" checked><span>Alerts enabled</span></label><label>Range <input type="range" class="xsh-range" min="0" max="100" value="65"></label></div>Overview
data-xsh-counter updates a text counter; data-xsh-password-toggle switches between password/text. data-xsh-select-all targets a named container.
Live example
Interactive · Real framework
0 / 120
Example markup
<div class="xsh-stack">
<label class="xsh-label" for="xsh-message">Project description</label>
<textarea class="xsh-textarea" id="xsh-message" maxlength="120" data-xsh-counter="#xsh-message-count" rows="3"></textarea>
<span class="xsh-small xsh-muted" id="xsh-message-count">0 / 120</span>
<label class="xsh-label" for="xsh-secret">Password</label>
<div class="xsh-input-group"><input id="xsh-secret" class="xsh-input" type="password" value="sample-secret"><button class="xsh-btn xsh-btn-secondary" data-xsh-password-toggle="#xsh-secret" aria-label="Show password" aria-pressed="false">Show</button></div>
</div>Production guidance
Password demo value is fictional. Avoid logging credentials and never store secrets in the page source for real applications.
Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.
Build with confidenceOpen interactive design playground →
Complete selector inventory
These selectors exist in the current distribution. An entry in this table does not imply that arbitrary modifier combinations are meaningful; use the examples above for the intended composition.
| Class | Purpose | Delivery |
|---|---|---|
.xsh-input | Core component | CSS-only |
.xsh-input-addon | Composable modifier / structure class | CSS-only |
.xsh-input-group | Composable modifier / structure class | CSS-only |
Implementation details
Interactive behavior
Browser validation does not replace server validation. Use aria-describedby for error text.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Never use placeholder text as the only field label.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.