Pit Viper

v2.15.0

Pit Viper

v2.15.0
v1 / v2

  • Home
  • Components
  • Forms

Forms

Accessibility note: All inputs need a corresponding label. To relate them to each other, use the for attribute in the label that matches the id of the input. MDN Label Documentation.

Text Input

Use pv-input-text for most types of input elements.

Example
Inputs with types of text, date, and password.

HTML 
<label for="text-input" class="pv-label pv-stack-8">Input Label</label>
<input type="text" class="pv-input-text" placeholder="Text Input" id="text-input" name="text-input">
<label for="date-input" class="pv-label pv-stack-8">Input Label</label>
<input type="text" class="pv-input-text" placeholder="Date Input" id="date-input" name="date-input">
<label for="password-input" class="pv-label pv-stack-8">Input Label</label>
<input type="password" class="pv-input-text" placeholder="Password Input" id="password-input" name="password-input">

Search Input

Similar to the text input but includes a search icon on the left.

Example
A search input with label.

HTML 
<label for="search-input" class="pv-label pv-stack-8">Input Label</label>
<input type="text" class="pv-input-search" placeholder="Search Input" id="search-input" name="search-input">

Example
A search input with popover.

HTML 
<label id="state-filter-label" for="state-filter" class="pv-label">State</label>
<div class="pv-dropdown">
  <input type="text" class="pv-input-search pv-input-small" placeholder="Filter by state..." id="state-filter-search" name="state-filter-search" onfocus="this.toggleAttribute('data-dropdown')" onblur="this.removeAttribute('data-dropdown')">
  <div role="menu" class="pv-popover pv-scroller" style="--width: fit-content; top: calc(100% + 2px); max-height: 180px;">
    <ul role="list" class="pv-popover-list" aria-describedby="state-filter-label">
      <li>
        <label class="pv-label pv-label-hover pv-flex">
          <input type="checkbox" name="state-filter-selection" value="california" class="pv-checkbox">
          <span>
            <span>California (CA)</span>
            <span>(53,382)</span>
          </span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-label-hover pv-flex">
          <input type="checkbox" name="state-filter-selection" value="new-york" class="pv-checkbox">
          <span>
            <span>New York (NY)</span>
            <span>(30,824)</span>
          </span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-label-hover pv-flex">
          <input type="checkbox" name="state-filter-selection" value="texas" class="pv-checkbox">
          <span>
            <span>Texas (TX)</span>
            <span>(15,900)</span>
          </span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-label-hover pv-flex">
          <input type="checkbox" name="state-filter-selection" value="florida" class="pv-checkbox">
          <span>
            <span>Florida (FL)</span>
            <span>(15,281)</span>
          </span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-label-hover pv-flex">
          <input type="checkbox" name="state-filter-selection" value="ohio" class="pv-checkbox">
          <span>
            <span>Ohio (OH)</span>
            <span>(25,927)</span>
          </span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-label-hover pv-flex">
          <input type="checkbox" name="state-filter-selection" value="ohio" class="pv-checkbox">
          <span>
            <span>Massachusetts (MA)</span>
            <span>(20,123)</span>
          </span>
        </label>
      </li>
    </ul>
  </div>
</div>

Padded End

Use the padded end class to provide space inside a text input to include an icon button without the text of the input overlapping the button. The text input and the button must be enclosed in a container with .pv-relative to ensure the button is properly positioned.

Example
A text input with an icon button on the right.

HTML 
<div class="pv-relative">
  <input type="text" class="pv-input-text pv-input-padded-end">
  <button type="button" class="pv-button-icon pv-button-small">
    <svg aria-hidden="true" class="pv-icon-16">
      <title>Send</title>
      <use xlink:href="#send"></use>
    </svg>
  </button>
</div>

File Input

The file input hides the native input and uses the label element to trigger the selection of a file. When a file is uploaded, the text of the <p> after the label should be replaced with the name of the file and a button should be included that clears the uploaded file.

Example
A file input before and after a file is added.

Upload .pdf, .doc, or .txt.

insura.pdf

HTML 
<div class="pv-input-file">
  <input type="file" id="file" name="file">
  <label for="file" class="pv-label">
    <span class="pv-button-secondary">Choose File</span>
  </label>
  <p class="pv-text-subdued">Upload .pdf, .doc, or .txt.</p>
</div>
<div class="pv-input-file">
  <input type="file" id="file" name="file">
  <label for="file" class="pv-label">
    <span class="pv-button-secondary">Choose File</span>
  </label>
  <p class="pv-flex-item pv-truncate">insura.pdf</p>
  <button type="button" class="pv-button-icon">
    <svg aria-hidden="true" class="pv-icon-20 pv-text-red">
      <title>Delete File</title>
      <use xlink:href="#trash"></use>
    </svg>
  </button>
</div>

Textarea

You can control the height of a textarea using the rows attribute. You can also adjust the resize behavior using the a custom property.

Custom Property Default Value Description
--resize vertical Direction(s) which the textarea can be resized

Example
A textarea with label using the rows attribute to set the default height.

HTML 
<label for="textarea" class="pv-label">Input Label</label>  
<textarea class="pv-textarea" placeholder="Textarea" rows="4" id="textarea" name="textarea"></textarea>

Select

Example
A select element with label and three options.

HTML 
<label for="select" class="pv-label">Input Label</label>
<select class="pv-select" name="select" id="select">
  <option>Select...</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Override Icon

Use the --select-background-image custom property to use a different icon. Download the icon you’d like to use, and use an SVG to data URI encoder to use it in CSS. You may need to add fill="%2302363D" after path to use the default icon color.

Example
A multiselect with an icon override. Only works if you are using the same icon on active & hover.

Custom Property Default Value Description
--select-background-image URL Encoded SVG Down caret icon
HTML 
<label for="select" class="pv-label">Select an Option</label>
<select id="select" name="select" class="pv-select" style="--select-background-image: url('data:image/svg+xml,%3Csvg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;%2302363D&quot; d=&quot;M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.6 12.9h-3.7v3.7c0 .2-.1.5-.3.7-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7v-3.7H7.4c-.2 0-.5-.1-.7-.3-.2-.2-.3-.4-.3-.7s.1-.5.3-.7c.2-.2.4-.3.7-.3h3.7V7.4c0-.2.1-.5.3-.7.2-.2.4-.3.7-.3s.5.1.7.3c.2.2.3.4.3.7v3.7h3.7c.2 0 .5.1.7.3.2.2.3.4.3.7s-.1.5-.3.7c-.4 0-.6.1-.9.1z&quot;/%3E%3C/svg%3E');">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Multi-Select

Use a multi-select to toggle a popover on click. The popover should contain a popover list with checkboxes.

This component requires the following JS assets to function properly. Read the documentation for information on how to import the assets for your application.

  • pit-viper.js

Enclose the button .pv-select-multiple and the popover inside of a container using the pv-dropdown-auto-close component and class .pv-dropdown.

The popover is displayed when the attribute data-dropdown is toggled on the button. With pv-dropdown-auto-close tag, the dropdown will close if you click anywhere outside of the dropdown.

For long text labels, add the truncate utility.

Example
A multi-select that triggers a popover with a list of checkboxes.
HTML 
<pv-dropdown-auto-close class="pv-dropdown">
  <button type="button" class="pv-select-multiple" onclick="this.toggleAttribute('data-dropdown')">Dropdown</button>
  <div class="pv-popover">
    <ul role="list" class="pv-popover-list">
      <li>
        <label class="pv-label pv-flex">
          <input type="checkbox" class="pv-checkbox">
          <span>Draft</span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-flex">
          <input type="checkbox" class="pv-checkbox">
          <span>Refreshing</span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-flex">
          <input type="checkbox" class="pv-checkbox">
          <span>Ready</span>
        </label>
      </li>
      <li>
        <label class="pv-label pv-flex">
          <input type="checkbox" class="pv-checkbox">
          <span>Failed</span>
        </label>
      </li>
    </ul>
  </div>
</pv-dropdown-auto-close>
<!-- import pit-viper.js as described in the PV usage instructions -->

You can also use the dropdown component on a primary button.

Example
A dropdown on a primary button.
HTML 
<pv-dropdown-auto-close class="pv-dropdown">
  <button type="button" class="pv-button-primary" onclick="this.toggleAttribute('data-dropdown')">
  <svg xmlns='http://www.w3.org/2000/svg' class="pv-icon" viewBox="0 0 24 24"><path d="M12 1C5.9 1 1 5.9 1 12s4.9 11 11 11 11-4.9 11-11S18.1 1 12 1zm5 12.2h-3.8V17c0 .7-.5 1.2-1.2 1.2s-1.2-.5-1.2-1.2v-3.8H7c-.7 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2h3.8V7c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2v3.8H17c.7 0 1.2.5 1.2 1.2s-.5 1.2-1.2 1.2z"/></svg>
    Dropdown
  </button>
  <div class="pv-popover">
    <ul role="list" class="pv-popover-list">
      <li>
        <label class="pv-label pv-flex">
          <input type="checkbox" class="pv-checkbox">
          <span>Draft</span>
        </label>
      </li>
    </ul>
  </div>
</pv-dropdown-auto-close>
<!-- import pit-viper.js as described in the PV usage instructions -->

Small Inputs

Use the input-small utility to reduce the padding on any of the input types above.

Example
A small text input.

HTML 
<input type="text" class="pv-input-text pv-input-small" placeholder="Text Input" id="small-input" name="text-input">

Checkboxes

Use checkboxes when a user should be able to toggle an option or select multiple options from a group.

Enclosing the checkbox and label text in a <label> element allows the user to select the option by clicking the label as well as the checkbox. Using .pv-label-hover will change the cursor to a pointer on hover.

Example
A checkbox in various states.

HTML 
<label class="pv-label pv-label-hover pv-flex">
  <input type="checkbox" name="checkbox" value="1" class="pv-checkbox">
  <span>Unchecked checkbox</span>
</label>
<label class="pv-label pv-label-hover pv-flex">
  <input type="checkbox" name="checkbox" value="2" class="pv-checkbox" checked>
  <span>Checked checkbox</span>
</label>
<label class="pv-label pv-label-hover pv-flex">
  <input type="checkbox" name="checkbox" value="2" class="pv-checkbox" id="indeterminate">
  <span>Indeterminate checkbox</span>
</label>
<script>
  document.getElementById("indeterminate").indeterminate = true;
</script>
<label class="pv-label pv-label-hover pv-flex">
  <input type="checkbox" name="checkbox" value="3" class="pv-checkbox" disabled>
  <span>Disabled unchecked checkbox</span>
</label>
<label class="pv-label pv-label-hover pv-flex">
  <input type="checkbox" name="checkbox" value="4" class="pv-checkbox" disabled checked>
  <span>Disabled checked checkbox</span>
</label>

Switch

Switches or toggles are a type of input[type="checkbox"] element that is used for activating or disabling a persistent state.

Switches should use a label element but you can omit the text, if necessary. Using .pv-label-hover will change the cursor to a pointer on hover on label text.

Add .pv-input-small for a smaller version of the switch.

Example
Switches in various states.

HTML 
<label for="switch-off" class="pv-label pv-switch pv-label-hover">
    <span>Off by default</span>
    <input type="checkbox" role="switch" id="switch-off">
  </label>
  <label for="switch-on" class="pv-label pv-switch pv-label-hover">
    <span>On by default</span>
    <input type="checkbox" role="switch" id="switch-on" checked>
  </label>
  <label for="switch-disabled" class="pv-label pv-switch pv-label-hover">
    <span>Disabled</span>
    <input type="checkbox" role="switch" id="switch-disabled" disabled>
    <input type="checkbox" role="switch" id="switch-disabled-checked" checked disabled>
  </label>
  <label for="switch-small" class="pv-label pv-switch pv-input-small pv-label-hover">
    <span class="pv-text-title-xs">Small Off by default</span>
    <input type="checkbox" role="switch" id="switch-small">
  </label>
  <label for="switch-small-on" class="pv-label pv-switch pv-input-small pv-label-hover">
    <span class="pv-text-title-xs">Small On by default</span>
    <input type="checkbox" role="switch" id="switch-small-on" checked>
  </label>

Radio Buttons

Use radio buttons when a user should be able to one option from a group of options.

Enclosing the radio button and label text in a <label> element allows the user to select the option by clicking the label as well as the radio button. Using .pv-label-hover will change the cursor to a pointer on hover.

Example
A radio button in various states.

HTML 
<label class="pv-label pv-label-hover pv-flex">
  <input type="radio" name="radio" value="1" class="pv-radio">
  <span>Unchecked radio button</span>
</label>
<label class="pv-label pv-label-hover pv-flex">
  <input type="radio" name="radio" value="2" class="pv-radio" checked>
  <span>Checked radio button</span>
</label>
<label class="pv-label pv-label-hover pv-flex">
  <input type="radio" name="radio" value="3" class="pv-radio" disabled>
  <span>Disabled unchecked radio button</span>
</label>
<label class="pv-label pv-label-hover pv-flex">
  <input type="radio" name="radio2" value="4" class="pv-radio" disabled checked>
  <span>Disabled checked radio button</span>
</label>

Selectable Label

Use the selectable label when you want to highlight a label container that includes a lot of content.

Example
A pair of radio buttons with selectable labels.

HTML 
<div class="pv-grid">
  <label class="pv-label-selectable" for="business">
    <div class="pv-space-between pv-stack-24" style="--flex-align: flex-start">
      <svg aria-hidden="true" class="pv-icon-64">...</svg>
      <input type="radio" class="pv-radio" name="type" id="business" checked>
    </div>
    <p class="pv-text-title-xl">For business.</p>
    <p class="pv-text-subdued">For those looking to join the Turquoise platform.</p>
  </label>
  <label class="pv-label-selectable" for="patient">
    <div class="pv-space-between pv-stack-24" style="--flex-align: flex-start">
      <svg aria-hidden="true" class="pv-icon-64">...</svg>
      <input type="radio" class="pv-radio" name="type" id="patient">
    </div>
    <p class="pv-text-title-xl">As a patient.</p>
    <p class="pv-text-subdued">For individuals looking to benefit from receiving care.</p>
  </label>
</div>

Small Selectable Label

Use the small variant of selectable label to reduce the padding and border radius. You can use .pv-hide to hide the checkbox element and let the entire label be the click target.

Example
Small Selectable Labels

HTML 
<label class="pv-label-selectable-small" for="1">
  <input type="radio" class="pv-hide" name="type" id="1">
  <div class="pv-flex">
    <span class="pv-flex-item">Insura HMO Rates 10-1</span>
    <div style="min-width: 140px">
      <span class="pv-tag">Base Language</span>
    </div>
    <span>Jan 01, 2021</span>
  </div>
</label>
<label class="pv-label-selectable-small" for="2">
  <input type="radio" class="pv-hide" name="type" id="2" checked>
  <div class="pv-flex">
    <span class="pv-flex-item">Amendment 1 Metropolis Hospital East</span>
    <div style="min-width: 140px">
      <span class="pv-tag">Amendment</span>
    </div>
    <span>Nov 24, 2023</span>
  </div>
</label>
  <label class="pv-label-selectable-small" for="3">
  <input type="radio" class="pv-hide" name="type" id="3">
  <div class="pv-flex">
    <span class="pv-flex-item">Services Fee Schedule</span>
    <div style="min-width: 140px">
      <span class="pv-tag">Amendment</span>
    </div>
    <span>Aug 03, 2023</span>
  </div>
</label>

Toggle button

Toggle buttons are stylized variations on radio and checkbox inputs.

Example
Toggle buttons can be used with or without icons, with alternate backgrounds and border radii, and as an icon only.

HTML 
<div class="pv-flex">
  <label class="pv-toggle pv-flex" for="toggle-0-1" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-0" id="toggle-0-1">
    <svg aria-hidden="true" class="pv-icon">
      <title>Send</title>
      <use xlink:href="#thumbs-up"></use>
    </svg>
    <span>Yes</span>
  </label>
  <label class="pv-toggle" for="toggle-0-2" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-0" id="toggle-0-2">
    <span>No</span>
  </label>
</div>
<div class="pv-flex">
  <label class="pv-toggle-tertiary" for="toggle-2-1" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-2" id="toggle-2-1">
    <span>Yes</span>
  </label>
  <label class="pv-toggle-tertiary" for="toggle-2-2" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-2" id="toggle-2-2">
    <span>No</span>
  </label>
</div>
<div class="pv-flex">
  <label class="pv-toggle-icon" for="toggle-3-1" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-3" id="toggle-3-1">
    <svg aria-hidden="true" class="pv-icon">
      <title>Send</title>
      <use xlink:href="#thumbs-up"></use>
    </svg>
  </label>
  <label class="pv-toggle-icon" for="toggle-3-2" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-3" id="toggle-3-2">
    <svg aria-hidden="true" class="pv-icon">
      <title>Send</title>
      <use xlink:href="#thumbs-down"></use>
    </svg>
  </label>
</div>
<div class="pv-flex">
  <label class="pv-toggle-icon pv-toggle-round" for="toggle-4-1" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-4" id="toggle-4-1">
    <svg aria-hidden="true" class="pv-icon">
      <title>Send</title>
      <use xlink:href="#thumbs-up"></use>
    </svg>
  </label>
  <label class="pv-toggle-icon pv-toggle-round" for="toggle-4-2" tabindex="0">
    <input type="radio" class="pv-hide" name="toggle-example-4" id="toggle-4-2">
    <svg aria-hidden="true" class="pv-icon">
      <title>Send</title>
      <use xlink:href="#thumbs-down"></use>
    </svg>
  </label>
</div>
<div class="pv-flex">
  <label class="pv-toggle" for="toggle-5-1">
    <input type="radio" class="pv-hide" name="toggle-example-5" id="toggle-5-1" disabled>
    <span>Disabled</span>
  </label>
</div>

Input Group

Use an input group to group a label, input, and help text without needing to use utility classes for size or spacing of those elements.

Example
An input group.

This is some help text.

Error State

Use the data attribute data-invalid to add a red border to form inputs. If possible, also include error text below the invalid input using .pv-text-red.

Example
An invalid text input.

First Name is required

HTML 
<label class="pv-label" for="first-name">First Name</label>
<input type="text" name="first-name" id="first-name" class="pv-input-text pv-stack-4" style="max-width: 250px" data-invalid>
<p class="pv-text-red pv-text-body-xs">First Name is required</p>

Prefix and Suffix Symbols

Use data-prefix or data-suffix to add a character to the left or right of a text input. Inputs with prefixes or suffixes must be enclosed in their own div since pseudo elements can’t be applied directly to input elements.

Example
Text inputs with a $ prefix and % suffix.

HTML 
<div class="pv-input-group">
  <label for="prefix-example">Input w/ prefix</label>
  <div>
    <input type="text" class="pv-input-text" placeholder="Placeholder text" value="164,309" data-prefix="$">
  </div>
</div>
<div class="pv-input-group">
  <label for="prefix-example">Input w/ suffix</label>
  <div>
    <input type="text" class="pv-input-text pv-text-right" placeholder="Placeholder text" value="45.2" data-suffix="%">
  </div>
</div>

Ghost Input

A ghost input component is a subtle, minimalistic text input field that blends seamlessly into the UI until interacted with. It is commonly used for search bars, inline editing, and lightweight forms where a less intrusive design is needed.

The ghost input can optionally include one or more icon buttons before the input, which will be invisible until the ghost input container is hovered over or the input within is focused.

You can pass a size via the data-style attribute.

Example
Ghost inputs in different sizes.

HTML 
<div class="pv-ghost-input" data-style="h1">
  <button class="pv-button-icon pv-button-xsmall">
    <svg aria-hidden="true" class="pv-icon">
      <use xlink:href="#expand"></use>
    </svg>
  </button>
  <button class="pv-button-icon pv-button-xsmall">
    <svg aria-hidden="true" class="pv-icon">
      <use xlink:href="#reorder"></use>
    </svg>
  </button>
  <input type="text" placeholder="Placeholder text" name="ghost-input-h1">
</div>