Forms

Text Input

HTML 
<label class="fizz-label fizz-stack-4" for="input-text">Label</label>
<input type="text" id="input-text" name="input-text" placeholder="Text Input" class="fizz-input-text">

Search Input

HTML 
<input type="search" id="input-search" name="input-search" placeholder="Search Input" class="fizz-input-search">

Small Input

HTML 
<label class="fizz-label fizz-stack-4" for="input-text2">Label</label>
<input type="text" id="input-text2" name="input-text2" placeholder="Text Input" class="fizz-input-text fizz-input-small">

Input Error

This is an error message

HTML 
<label class="fizz-label fizz-stack-4" for="input-text">Label</label>
<input type="text" id="input-text" name="input-text" placeholder="Text Input" class="fizz-input-text fizz-input-error fizz-stack-4">

<p class="fizz-flex-row-4 fizz-text-urgent fizz-text-medium">
  <svg class="fizz-icon-16" role="img" aria-hidden="true" width="24" height="24">
      <use href="#info"></use>
    </svg>
  <span>This is an error message</span>
</p>

Disabled Input

HTML 
<label class="fizz-label fizz-stack-4" for="input-text">Label</label>
<input type="text" id="input-disabled" name="input-text" placeholder="Text Input" class="fizz-input-text" disabled>

Input with Button

Nesting a button inside of a text input is tricky, but it can be done. First, you'll need a container with .fizz-relative and .fizz-inline-block to properly position the button and prevent the container from stretching the full-width of the available space.

Next, you'll create a container with .fizz-input-text to apply input styles to the container, as well as .fizz-input-with-button, which strips the styling of the actual input within.

The button element immediately after the .fizz-input-with-button container will be placed absolutely inside of the form element.

All of this is necessary to provide space for the UI of third-party password managers (LastPass) without overlapping the button, while also still keeping the tab order of the input and button correct.

HTML 
<div class="fizz-relative fizz-inline-block">
  <div class="fizz-input-text fizz-input-with-button">
    <input type="text" placeholder="Input with button">
  </div>
  <button class="fizz-icon-button-small">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="fizz-icon-16"><path d="m2 28 28-12L2 4v9.3L22 16 2 18.7V28z"/></svg>
  </button>
</div>

Textarea

HTML 
<label class="fizz-label fizz-stack-4" for="textarea">Label</label>
<textarea class="fizz-textarea" name="textarea" id="textarea" placeholder="Textarea"></textarea>

Select

HTML 
<label class="fizz-label fizz-stack-4" for="select">Label</label>
<select class="fizz-select" name="select" id="select">
  <option>Select One...</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Small Select

HTML 
<label class="fizz-label fizz-stack-4" for="select">Label</label>
<select class="fizz-select fizz-input-small" name="select" id="select">
  <option>Select One...</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Checkbox

HTML 
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox1">
  <input type="checkbox" class="fizz-checkbox" name="checkbox" id="checkbox1" checked>
  <span>Checkbox 1</span>
</label>
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox2">
  <input type="checkbox" name="checkbox" id="checkbox2" class="fizz-checkbox">
  <span>Checkbox 2</span>
</label>
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox3">
  <input type="checkbox" name="checkbox" id="checkbox3" class="fizz-checkbox" disabled checked>
  <span>Checkbox 3</span>
</label>
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox4">
  <input type="checkbox" name="checkbox" id="checkbox4" class="fizz-checkbox" disabled>
  <span>Checkbox 4</span>
</label>

Large Checkbox

HTML 
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox5">
  <input type="checkbox" name="checkbox-large" id="checkbox5" class="fizz-checkbox-large" checked>
  <span>Checkbox 5</span>
</label>
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox6">
  <input type="checkbox" name="checkbox-large" id="checkbox6" class="fizz-checkbox-large">
  <span>Checkbox 6</span>
</label>
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox7">
  <input type="checkbox" name="checkbox-large" id="checkbox7" class="fizz-checkbox-large" disabled checked>
  <span>Checkbox 7</span>
</label>
<label class="fizz-flex-row-8 fizz-stack-12" for="checkbox8">
  <input type="checkbox" name="checkbox-large" id="checkbox8" class="fizz-checkbox-large" disabled>
  <span>Checkbox 8</span>
</label>

Radio Button

HTML 
<div class="fizz-surface fizz-inset-square-16">
  <label class="fizz-flex-row-8 fizz-stack-12" for="radio1">
    <input type="radio" class="fizz-radio-button" name="radio" id="radio1" checked>
    <span>Radio Button 1</span>
  </label>
  <label class="fizz-flex-row-8 fizz-stack-12" for="radio2">
    <input type="radio" name="radio" id="radio2" class="fizz-radio-button">
    <span>Radio Button 2</span>
  </label>
  <label class="fizz-flex-row-8 fizz-stack-12" for="radio3">
    <input type="radio" name="radio" id="radio3" class="fizz-radio-button" disabled>
    <span>Radio Button 3</span>
  </label>
</div>

Toggle Switch

HTML 
<label class="fizz-toggle" for="toggle1">
  <input type="checkbox" name="toggle2" id="toggle1" checked>
  <span class="fizz-toggle-switch"></span>
  <span>Toggle On</span>
</label>

<label class="fizz-toggle" for="toggle2">
  <input type="checkbox" name="toggle2" id="toggle2">
  <span class="fizz-toggle-switch"></span>
  <span>Toggle Off</span>
</label>

<label class="fizz-toggle" for="toggle3">
  <input type="checkbox" name="toggle3" id="toggle3" disabled>
  <span class="fizz-toggle-switch"></span>
  <span>Toggle Disabled</span>
</label>

File Upload

HTML 
<label for="file-upload" class="fizz-file-upload">
  <span>Upload</span>
  <input type="file" name="file-upload" id="file-upload">
</label>
HTML 
<label for="file-upload-disabled" class="fizz-file-upload fizz-is-disabled">
  <input type="file" id="file-upload-disabled" disabled>
  <span>Upload</span>
  <div class="fizz-progress" style="--progress: 80%"></div>
  <p>Uploading&hellip;</p>
</label>

Progress Bar

Apply the submission progress bar as a stand alone style with, .fizz-progress

Uploading 60%
HTML 
<div class="fizz-heading-3 fizz-text-center">Uploading 60%</div>
  <div class="fizz-progress" style="--progress: {percentage}%"></div>
</div>