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>

Select Button

You may encounter situations where you need to choose between using a select button or a native select element. You might want a button that looks like a select element but functions like a button. Here are some guidelines to help you decide when to use a select button instead of a native select:

  1. If you need more control over the behavior of the component.
  2. Provide additional contextual information, such as the number of options or the currently selected value, or to trigger a popover, which can make it more accessible.
  3. If you're dealing with a large number of options, a select button can be more performant.
HTML 
<div class="fizz-flex-row">
  <select class="fizz-select">
    <option>Select Element</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button class="fizz-button-select">Select Button</button>
</div>

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>