Forms

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

Inputs are width: 100%; by default. You can use .grid inside a form.

All native form elements are fully customizable and themeable with CSS variables.

<form>
+
+  <!-- Grid -->
+  <div class="grid">
+
+    <!-- Markup example 1: input is inside label -->
+    <label for="firstname">
+      First name
+      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+    </label>
+
+    <label for="lastname">
+      Last name
+      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+    </label>
+
+  </div>
+
+  <!-- Markup example 2: input is after label -->
+  <label for="email">Email address</label>
+  <input type="email" id="email" name="email" placeholder="Email address" required>
+  <small>We'll never share your email with anyone else.</small>
+
+  <!-- Button -->
+  <button type="submit">Submit</button>
+
+</form>

Disabled and validation states:

<input type="text" placeholder="Valid" aria-invalid="false">
+<input type="text" placeholder="Invalid" aria-invalid="true">
+<input type="text" placeholder="Disabled" disabled>
+<input type="text" value="Readonly" readonly>

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

Fruit

Size Small Medium Large Extra Large

I agree to the Terms and Conditions I agree to share my information with partners

Publish on my profile User must change password at next logon

<!-- Select -->
+<label for="fruit">Fruit</label>
+<select id="fruit" required>
+  <option value="" selected>Select a fruit…</option>
+  <option>…</option>
+</select>
+
+<!-- Radios -->
+<fieldset>
+  <legend>Size</legend>
+  <label for="small">
+    <input type="radio" id="small" name="size" value="small" checked>
+    Small
+  </label>
+  <label for="medium">
+    <input type="radio" id="medium" name="size" value="medium">
+    Medium
+  </label>
+  <label for="large">
+    <input type="radio" id="large" name="size" value="large">
+    Large
+  </label>
+  <label for="extralarge">
+    <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+    Extra Large
+  </label>
+</fieldset>
+
+<!-- Checkboxes -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+  <label for="terms_sharing">
+    <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+    I agree to share my information with partners
+  </label>
+</fieldset>
+
+<!-- Switches -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+  <label for="switch_disabled">
+    <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
+    User must change password at next logon
+  </label>
+</fieldset>

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

Select all

<script>
+  document.getElementById('indeterminate-checkbox').indeterminate = true;
+</script>

Others input types:

File browser Range slider Date Time Color

<!-- Search -->
+<input type="search" id="search" name="search" placeholder="Search">
+
+<!-- File browser -->
+<label for="file">File browser
+  <input type="file" id="file" name="file">
+</label>
+
+<!-- Range slider -->
+<label for="range">Range slider
+  <input type="range" min="0" max="100" value="50" id="range" name="range">
+</label>
+
+<!-- Date -->
+<label for="date">Date
+  <input type="date" id="date" name="date">
+</label>
+
+<!-- Time -->
+<label for="time">Time
+  <input type="time" id="time" name="time">
+</label>
+
+<!-- Color -->
+<label for="color">Color
+  <input type="color" id="color" name="color" value="#0eaaaa">
+</label>