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
Form validation
Native constraint validation with custom field errors and programmatic hooks.
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
Set novalidate and data-xsh-validate on the form. Provide data-xsh-error-target="#xsh-field-error" on controls and corresponding error elements.
Live example
Interactive · Real frameworkExample markup
<form class="xsh-stack" data-xsh-validate novalidate onsubmit="event.preventDefault(); window.Xshna.toast('Validated',{type:'success'});">
<label class="xsh-label" for="xsh-validate-email">Email is required</label>
<input id="xsh-validate-email" class="xsh-input" type="email" required data-xsh-error-target="#xsh-validate-error" placeholder="[email protected]">
<p class="xsh-form-error" id="xsh-validate-error" role="status"></p>
<button class="xsh-btn xsh-btn-primary">Validate</button>
</form>Production guidance
The script marks invalid controls and prevents invalid submissions; server-side validation remains mandatory. Inline demo handlers are for docs only, not required in 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-form-error | 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.