Forms
input
s 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 type
s 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">
<svg aria-hidden="true" class="pv-icon-20">
<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-24 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="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%2302363D" d="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"/%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 -->
Dropdown Button
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>