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

Disabled and read-only states

Native disabled fieldsets disable their descendant controls. Read-only fields retain focus and submission; disabled fields are omitted from submission.

Shipping options unavailable
Read only. This reference cannot be changed.
HTMLSelect text to copy
<fieldset disabled>
  <legend>Shipping options unavailable</legend>
  <label for="disabled-address">Address</label><input id="disabled-address" name="address" autocomplete="street-address" value="Unavailable">
  <label for="disabled-service">Service</label><select id="disabled-service" name="service"><option>Standard</option></select>
</fieldset>
<div class="form-group">
  <label for="explicit-readonly">Account reference</label>
  <input id="explicit-readonly" name="reference" value="REVA-001" readonly aria-describedby="readonly-hint">
  <small id="readonly-hint">Read only. This reference cannot be changed.</small>
</div>

Date, time and numeric controls

Native pickers, constraints and keyboard behaviour remain browser-owned. Picker appearance and support vary by browser. These fields have no submission handler.

HTMLSelect text to copy
<div class="grid cols-2">
  <div class="form-group"><label for="extended-date">Appointment date <small>(required)</small></label><input id="extended-date" name="date" type="date" required></div>
  <div class="form-group"><label for="extended-time">Time</label><input id="extended-time" name="time" type="time"></div>
  <div class="form-group"><label for="extended-datetime">Local date and time</label><input id="extended-datetime" name="local-time" type="datetime-local"></div>
  <div class="form-group"><label for="extended-number">Quantity</label><input id="extended-number" name="quantity" type="number" min="1" max="20" step="1" value="1"></div>
</div>

Text fields, select and textarea

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

HTMLSelect text to copy
<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
HTMLSelect text to copy
<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 @.

HTMLSelect text to copy
<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.

60%
40%
HTMLSelect text to copy
<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.

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