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…</p>
</label>
Progress Bar
Apply the submission progress bar as a stand alone style with, .fizz-progress
HTML
<div class="fizz-heading-3 fizz-text-center">Uploading 60%</div>
<div class="fizz-progress" style="--progress: {percentage}%"></div>
</div>