Inputs

All form and interactive element rules are included in wexa.css. Buttons, inputs, selects, textareas, checkboxes, range sliders and progress bars are styled by default and adapt to light and dark mode.

Buttons

A plain <button> renders as a primary action button. The disabled attribute visually reduces the button and removes interactivity. Wrap in .contrast to force the high-contrast rendering.

<button>a button</button>
<button disabled>disabled</button>

<div class="contrast">
    <button>a button</button>
    <button disabled>disabled</button>
</div>

Variables

Interactive element colors are controlled by the following variables:

Variable	Role
`--buttons-bg-color`	Background color of primary buttons
`--buttons-bg-color-hover`	Background color of buttons on hover
`--buttons-fg-color`	Text color of buttons
`--inputs-bg-color`	Background color of text inputs, select and textarea
`--progress-bg-color`	Track color of progress bar and range slider
`--progress-fg-color`	Fill color of the progress bar
`--border-width`	Border thickness for inputs and fieldset
`--border-radius`	Corner radius for all form elements

Forms

Use <form> with <label> elements that reference their control via for/id. Wrap a group of related fields in <fieldset> with a <legend>. All inputs, selects and textareas fill the available width automatically.

Registration form with <fieldset> Text input: Select element: Radio inputs: Under 18 18 or older Select with optgroup: Textarea: I agree with the terms and conditions

<form method="get" action="#">
    <fieldset>
        <legend>Form legend</legend>
        <label for="field">Label:</label>
        <input name="field" type="text" id="field" />
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </fieldset>
</form>

Without a <fieldset>, fields and buttons sit flush in the flow. Labels and inputs remain block-level and stack vertically.

<form>
    <label for="price">Add funds:</label>
    <input id="price" type="text" placeholder="e.g. $10"/>
    <button type="submit">Pay</button>
</form>

Search

An <input type="search"> renders as a pill-shaped field with an embedded magnifying-glass icon. The field expands on focus to give more room for typing.

<form role="search">
    <label for="q">Search:</label>
    <input type="search" id="q" name="q" placeholder="Search…"/>
</form>

Validation states

Set aria-invalid="true" on an input to show an error icon. Set aria-invalid="false" to show a success icon. The icon appears inside the input field on the right side.

Valid field: Invalid field:

<input type="text" aria-invalid="false" value="correct"/>

<input type="text" aria-invalid="true" value="wrong"/>

Range slider

An <input type="range"> renders a full-width slider. The track uses --progress-bg-color and the thumb uses --buttons-bg-color. The thumb enlarges on hover.

Volume: Speed:

<label for="volume">Volume:</label>
<input type="range" id="volume" min="0" max="100" value="60"/>

File input

An <input type="file"> renders a styled file-selector button followed by the selected filename. The button inherits the primary button colors.

Profile picture: Document:

<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" accept="image/*"/>