COMPONENTS

Forms

Native controls need explicit labels. RevaCSS supplies appearance; your HTML supplies names, hints, errors and form behavior.

Usage

Markup: label, input, select, textarea, fieldset, legend

Behaviour: Native validation is preserved; applications provide error messages.

Component API and styling module · Inherited appearance settings

Text fields, select and textarea

Associate labels with unique input IDs. Set appropriate input types and autocomplete tokens.

Role

Message

<div class="stack">
  <div><label for="demo-email">Email</label>
    <input id="demo-email" name="email" type="email" autocomplete="email" placeholder="you@example.com"></div>
  <div><label for="demo-role">Role</label>
    <select id="demo-role" name="role"><option>Designer</option><option>Developer</option></select></div>
  <div><label for="demo-message">Message</label>
    <textarea id="demo-message" name="message" rows="3"></textarea></div>
</div>

Checkboxes and radios

Wrap each choice in its label. A shared radio name creates one native selection group.

Preferences Receive updates Personal Team

<fieldset>
  <legend>Preferences</legend>
  <label><input type="checkbox" name="updates"> Receive updates</label>
  <label><input type="radio" name="demo-plan" value="personal" checked> Personal</label>
  <label><input type="radio" name="demo-plan" value="team"> Team</label>
</fieldset>

Hints, errors and read-only fields

Connect explanatory text with aria-describedby. aria-invalid styles a supplied error state; CSS does not create or announce errors.

Enter an email address containing @.

Account ID Unavailable field

<label for="demo-error">Email</label>
<input id="demo-error" type="email" value="invalid-address" aria-invalid="true" aria-describedby="demo-error-text">
<p id="demo-error-text">Enter an email address containing @.</p>
<label for="demo-readonly">Account ID</label>
<input id="demo-readonly" value="REVA-001" readonly>
<label for="demo-disabled">Unavailable field</label>
<input id="demo-disabled" value="Unavailable" disabled>

Other native controls

Range, file, colour, date, progress and meter retain native behavior. No output calculation is performed by CSS.

Volume

Attachment

Colour

Date

Upload progress60%

Storage used40%

<div class="stack">
  <div><label for="demo-range">Volume</label><input id="demo-range" type="range" min="0" max="100" value="40"></div>
  <div><label for="demo-file">Attachment</label><input id="demo-file" type="file"></div>
  <div><label for="demo-colour">Colour</label><input id="demo-colour" type="color" value="#245dcc"></div>
  <div><label for="demo-date">Date</label><input id="demo-date" type="date"></div>
  <div><label for="demo-progress">Upload progress</label><progress id="demo-progress" value="60" max="100">60%</progress></div>
  <div><label for="demo-meter">Storage used</label><meter id="demo-meter" value="0.4">40%</meter></div>
</div>

Minimal controls

data-controls changes input treatment. It does not remove required labels or control boundaries.

Project name

<section data-controls="minimal" data-density="compact">
  <label for="demo-minimal">Project name</label>
  <input id="demo-minimal" placeholder="Your project">
</section>