Inputs & Forms
The Input components are a group of related input controls that allow users to provide data or configure options within a form.
The Input components are a group of related input controls that allow users to provide data or configure options within a form.
Used as a group of related input controls that allow users to provide data or configure options.
<div class="form-group">
<label class="form-label" for="default-input">Label (Title Case) <span class="text-red">*</span></label>
<input type="text" id="default-input" name="default-input" class="form-field" placeholder="Placeholder Text" required />
</div>
<div class="form-group">
<label class="form-label" for="default-input-tooltip">Label (Title Case) <span class="text-red">*</span> <i class="fa-regular fa-circle-question"></i>
<input type="text" id="default-input-tooltip" name="default-input-tooltip" class="form-field" placeholder="Placeholder Text" required />
</div>
<div class="form-group">
<label class="form-label" for="default-input-not-required">Label (Title Case)</label>
<input type="text" id="default-input-not-required" name="default-input-not-required" class="form-field" placeholder="Placeholder Text" />
</div>
<div class="form-group">
<label class="form-label" for="default-input-tooltip">Label (Title Case) <span class="text-red">*</span>
<input type="text" id="default-input-tooltip" name="default-input-tooltip" class="form-field" placeholder="Placeholder Text" required focused />
</div>
<div class="form-group disabled">
<label class="form-label" for="default-input-disabled">Label (Title Case)</label>
<input type="text" id="default-input-disabled" name="default-input-disabled" class="form-field" placeholder="Placeholder Text" disabled />
</div>
<div class="form-group">
<label class="form-label" for="default-input-assistive">Label (Title Case) <span class="text-red">*</span><<label>
<input type="text" id="default-input-text" name="default-input-text" class="form-field" placeholder="Placeholder Text" required data-chars-count maxlength="100" />
<span class="assistive-text text-right">100 characters left</span>
</div>
<div class="form-group">
<label class="form-label" for="default-input-assistive-alt">Label (Title Case) <span class="text-red">*</span><<label>
<input type="text" id="default-input-long-text" name="default-input-long-text" class="form-field" placeholder="Placeholder Text" required />
<span class="assistive-text">This is assistive text that helps the user with added context or required information.</span>
</div>
<div class="form-group">
<label class="form-label" for="default-input-resizer">Label (Title Case) <span class="text-red">*</span></label>
<textarea type="text" id="default-input-resizer" name="default-input-resizer" class="form-field form-field-resize" placeholder="Placeholder Text" required /> </textarea>
</div>
<div class="form-group error">
<label class="form-label" for="default-input-error">Label (Title Case) <span class="text-red">*</span></label>
<input type="text" id="default-input-error" name="default-input-error" class="form-field" placeholder="Placeholder Text" required />
<span class="assistive-text">Error message goes here</span>
</div>
<div class="form-group warning">
<label class="form-label" for="default-input-warning">Label (Title Case) <span class="text-red">*</span></label>
<input type="text" id="default-input-warning" name="default-input-warning" class="form-field" placeholder="Placeholder Text" required />
<span class="assistive-text">Warning message goes here</span>
</div>
<div class="form-group success">
<label class="form-label-success" for="default-input-warning">Label (Title Case) <span class="text-red">*</span></label>
<input type="text" id="default-input-success" name="default-input-success" class="form-field" placeholder="Placeholder Text" required />
<span class="assistive-text">Success message goes here</span>
</div>
<div class="form-group">
<label class="form-label" for="single-select-label">Label (Title Case) <span class="text-red">*</span></label>
<select name="single-select-label" id="single-select-label" class="custom-select" placeholder="Select Option" data-single-select required>
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="single-select-not-required">Label (Title Case)</label>
<select name="single-select-not-required" id="single-select-not-required" class="custom-select" placeholder="Select Option" data-single-select>
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="single-select-active">Label (Title Case) <span class="text-red">*</span></label>
<select name="single-select-active" id="single-select-active" class="custom-select focused" placeholder="Select Option" data-single-select required focused />
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
</div>
<div class="form-group disabled">
<label class="form-label" for="single-select-disabled">Label (Title Case)</label>
<select name="single-select-disabled" id="single-select-disabled" class="custom-select disabled" placeholder="Select Option" disabled tabindex="-1" />
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
</div>
<div class="form-group error">
<label class="form-label" for="single-select-error">Label (Title Case) <span class="text-red">*</span></label>
<select name="single-select-error" id="single-select-error" class="custom-select" placeholder="Select Option" data-single-select required>
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
<span class="assistive-text">Error message goes here</span>
</div>
<div class="form-group warning">
<label class="form-label" for="single-select-warning">Label (Title Case) <span class="text-red">*</span></label>
<select name="single-select-warning" id="single-select-warning" class="custom-select" placeholder="Select Option" data-single-select required>
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
<span class="assistive-text">Warning message goes here</span>
</div>
<div class="form-group success">
<label class="form-label" for="single-select-success">Label (Title Case) <span class="text-red">*</span></label>
<select name="single-select-success" id="single-select-success" class="custom-select" placeholder="Select Option" data-single-select required>
<option value="one">This is one option</option>
<option value="two">This is another option</option>
<option value="three">This is an option on hover</option>
<option value="four">This is another option</option>
</select>
<span class="assistive-text">Success message goes here</span>
</div>
<div class="form-group">
<label class="form-label" for="input-single-calendar">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-single-calendar" name="input-single-calendar" class="form-field single-calendar" placeholder="mm/dd/yyyy" required />
</div>
</div>
<div class="form-group">
<label class="form-label" for="input-calendar-not-required">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-calendar-not-required" name="input-calendar-not-required" class="form-field single-calendar" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="input-calendar-focus">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-calendar-focus" name="input-calendar-focus" class="form-field single-calendar" placeholder="mm/dd/yyyy" required focused />
</div>
</div>
<div class="form-group">
<label class="form-label" for="input-calendar-disabled">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-calendar-disabled" name="input-calendar-disabled" class="form-field single-calendar" placeholder="mm/dd/yyyy" required disabled />
</div>
</div>
<div class="form-group error">
<label class="form-label" for="input-calendar-error">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-calendar-error" name="input-calendar-error" class="form-field single-calendar" placeholder="mm/dd/yyyy" required />
</div>
<span class="assistive-text">Error message goes here</span>
</div>
<div class="form-group warning">
<label class="form-label" for="input-calendar-warning">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-calendar-warning" name="input-calendar-warning" class="form-field" placeholder="mm/dd/yyyy" required />
</div>
<span class="assistive-text">Warning message goes here</span>
</div>
<div class="form-group success">
<label class="form-label" for="input-calendar-success">Label (Title Case) <span class="text-red">*</span></label>
<div class="calendar-wrap">
<input type="text" id="input-calendar-success" name="input-calendar-success" class="form-field" placeholder="mm/dd/yyyy" required />
</div>
<span class="assistive-text">Success message goes here</span>
</div>
<div class="form-group">
<label class="form-label" for="password-input">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input" name="password-input" class="form-field" placeholder="Placeholder Text" required />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="password-input-not-required">Label (Title Case)</label>
<div class="password-wrap">
<input type="password" id="password-input-not-required" name="password-input-not-required" class="form-field" placeholder="Placeholder Text" />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="password-input-focus">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-focus" name="password-input-focus" class="form-field" placeholder="Placeholder Text" required focused />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
</div>
<div class="form-group disabled">
<label class="form-label" for="password-input-disabled">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-disabled" name="password-input-disabled" class="form-field" placeholder="Placeholder Text" required disabled />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="password-input-assistive">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-text" name="password-input-text" class="form-field" placeholder="Placeholder Text" required />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
<span class="assistive-text text-right">98 characters left</span>
</div>
<div class="form-group">
<label class="form-label" for="password-input-assistive-alt">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-long-text" name="password-input-long-text" class="form-field" placeholder="Placeholder Text" required />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
<span class="assistive-text">This is assistive text that helps the user with added context or required information.</span>
</div>
<div class="form-group error">
<label class="form-label" for="password-input-error">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-error" name="password-input-error" class="form-field" placeholder="Placeholder Text" required />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
<span class="assistive-text">Error message goes here</span>
</div>
<div class="form-group warning">
<label class="form-label" for="password-input-warning">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-warning" name="password-input-warning" class="form-field" placeholder="Placeholder Text" required />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
<span class="assistive-text">Warning message goes here</span>
</div>
<div class="form-group success">
<label class="form-label" for="password-input-success">Label (Title Case) <span class="text-red">*</span></label>
<div class="password-wrap">
<input type="password" id="password-input-success" name="password-input-success" class="form-field" placeholder="Placeholder Text" required />
<button class="password-view"><i class="fa-regular fa-eye-slash"></i></button>
</div>
<span class="assistive-text">Success message goes here</span>
</div>
<div class="form-group">
<label class="form-label" for="delete-input">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input" name="delete-input" class="form-field" placeholder="Placeholder Text" required />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="delete-input-not-required">Label (Title Case)</label>
<div class="delete-wrap">
<input type="text" id="delete-input-not-required" name="delete-input-not-required" class="form-field" placeholder="Placeholder Text" />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="delete-input-focus">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-focus" name="delete-input-focus" class="form-field" placeholder="Placeholder Text" required focused />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
</div>
<div class="form-group disabled">
<label class="form-label" for="delete-input-disabled">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-disabled" name="delete-input-disabled" class="form-field" placeholder="Placeholder Text" required disabled />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="delete-input-assistive">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-text" name="delete-input-text" class="form-field" placeholder="Placeholder Text" required data-chars-count maxlength="100" />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
<span class="assistive-text text-right">100 characters left</span>
</div>
<div class="form-group">
<label class="form-label" for="delete-input-assistive-alt">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-long-text" name="delete-input-long-text" class="form-field" placeholder="Placeholder Text" required />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
<span class="assistive-text">This is assistive text that helps the user with added context or required information.</span>
</div>
<div class="form-group error">
<label class="form-label" for="delete-input-error">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-error" name="delete-input-error" class="form-field" placeholder="Placeholder Text" required />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
<span class="assistive-text">Error message goes here</span>
</div>
<div class="form-group warning">
<label class="form-label" for="delete-input-warning">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-warning" name="delete-input-warning" class="form-field" placeholder="Placeholder Text" required />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
<span class="assistive-text">Warning message goes here</span>
</div>
<div class="form-group success">
<label class="form-label" for="delete-input-success">Label (Title Case) <span class="text-red">*</span></label>
<div class="delete-wrap">
<input type="text" id="delete-input-success" name="delete-input-success" class="form-field" placeholder="Placeholder Text" required />
<button class="delete-btn"><i class="fa-regular fa-trash-can text-red"></i></button>
</div>
<span class="assistive-text">Success message goes here</span>
</div>
<div class="form-group">
<label class="form-label" for="large-assistive">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text" id="large-text" class="form-field" required />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
</div>
<div class="form-group">
<label class="form-label" for="large-text-not-required">Label (Title Case)</label>
<textarea name="large-text-not-required" id="large-text-not-required" class="form-field" />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
</div>
<div class="form-group">
<label class="form-label" for="large-text-focused">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-focused" id="large-text-focused" class="form-field" required focused />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
</div>
<div class="form-group">
<label class="form-label" for="large-text-disabled">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-disabled" id="large-text-disabled" class="form-field" required disabled />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
</div>
<div class="form-group">
<label class="form-label" for="large-text-assistive">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-assistive" id="large-text-assistive" class="form-field" required data-chars-count maxlength="200" />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
<span class="assistive-text text-right">200 characters left</span>
</div>
<div class="form-group">
<label class="form-label" for="large-text-assistive-alt">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-assistive-alt" id="large-text-assistive-alt" class="form-field" required />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
<span class="assistive-text">This is assistive text that helps the user with added context or required information.</span>
</div>
<div class="form-group error">
<label class="form-label" for="large-text-error">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-error" id="large-text-error" class="form-field" required />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
<span class="assistive-text">Error message goes here</span>
</div>
<div class="form-group warning">
<label class="form-label" for="large-text-warning">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-warning" id="large-text-warning" class="form-field" required />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
<span class="assistive-text">Warning message goes here</span>
</div>
<div class="form-group success">
<label class="form-label" for="large-text-success">Label (Title Case) <span class="text-red">*</span></label>
<textarea name="large-text-success" id="large-text-success" class="form-field" required />
This is an example of a large text input field when there is a larger amount of text needed for the user to input.
</textarea>
<span class="assistive-text">Success message goes here</span>
</div>
Used for multi-select or single-select options within a form.
<label class="custom-radio">
<input type="radio" name="default-radio" />
<span class="custom-radio-icon"></span>
Default Radio Option
</label>
<label class="custom-radio">
<input type="radio" name="default-radio" checked />
<span class="custom-radio-icon">
Selected Radio Option
</label>
<label class="custom-radio disabled">
<input type="radio" name="default-radio" disabled checked />
<span class="custom-radio-icon"></span>
Disabled Selected Radio Option
</label>
<label class="custom-radio disabled">
<input type="radio" name="default-radio" disabled />
<span class="custom-radio-icon"></span>
Disabled Radio Option
</label>
<label class="form-label">This is an example of a question? <span class="text-red">*</span></label>
<div class="form-row">
<div class="form-col">
<label class="custom-radio">
<input type="radio" name="default-radio" />
<span class="custom-radio-icon"></span>
Option 1
</label>
</div>
<div class="form-col">
<label class="custom-radio">
<input type="radio" name="default-radio" />
<span class="custom-radio-icon"></span>
Option 2
</label>
</div>
</div>
<label class="form-label">This is an example of a question? <span class="text-red">*</span></label>
<div class="form-row">
<label class="custom-radio">
<input type="radio" name="default-radio-question" />
<span class="custom-radio-icon"></span>
Option 1
</label>
</div>
<div class="form-row">
<label class="custom-radio">
<input type="radio" name="default-radio-question" />
<span class="custom-radio-icon"></span>
Option 2
</label>
</div>
<div class="form-row">
<label class="custom-radio">
<input type="radio" name="default-radio-question" />
<span class="custom-radio-icon"></span>
Option 3
</label>
</div>
<div class="form-row">
<label class="custom-radio">
<input type="radio" name="default-radio-question" />
<span class="custom-radio-icon"></span>
Option 4
</label>
</div>
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Default Checkbox Option
</label>
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" checked />
<span class="custom-checkbox-icon"></span>
Selected Checkbox Option
</label>
<label class="custom-checkbox disabled">
<input type="checkbox" name="default-checkbox" disabled />
<span class="custom-checkbox-icon"></span>
Default Checkbox Option
</label>
<label class="custom-checkbox disabled">
<input type="checkbox" name="default-checkbox" disabled checked />
<span class="custom-checkbox-icon"></span>
Disabled Selected Checkbox Option
</label>
<label class="custom-checkbox mixed">
<input type="checkbox" name="default-checkbox" checked />
<span class="custom-checkbox-icon"></span>
Mixed Options
</label>
<label class="form-label">This is an example of a question? <span class="text-red">*</span></label>
<div class="form-row">
<div class="form-col">
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Option 1
</label>
</div>
<div class="form-col">
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Option 2
</label>
</div>
</div>
<label class="form-label">This is an example of a question? <span class="text-red">*</span></label>
<div class="form-row">
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Option 1
</label>
</div>
<div class="form-row">
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Option 2
</label>
</div>
<div class="form-row">
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Option 3
</label>
</div>
<div class="form-row">
<label class="custom-checkbox">
<input type="checkbox" name="default-checkbox" />
<span class="custom-checkbox-icon"></span>
Option 4
</label>
</div>
Used for multi-select or single-select options within a form.
<div class="custom-file">
<small>This file upload only accepts .pdf files.</small>
<div>
<label for="attachment">
<a class="custom-file-btn" role="button" aria-disabled="false">Choose File</a>
</label>
<input type="file" name="file[]" accept=".pdf" id="attachment" class="form-file" style="visibility: hidden; position: absolute;" multiple />
<span class="custom-file-empty-text">No File Chosen</span>
</div>
</div>
<label class="form-label">This is an example of a question? <span class="text-red">*</span></label>
<label class="form-label text-gray">This is an example of a question? <span class="text-red">*</span></label>
<label class="form-label text-teal">This is an example of a question? <span class="text-red">*</span></label>
<span class="assistive-text">1 upper case letter (A-Z)</span>
<span class="assistive-text error">1 upper case letter (A-Z)</span>
<div class="error">
<span class="assistive-text">1 upper case letter (A-Z)</span>
</div>
<span class="assistive-text warning">1 upper case letter (A-Z)</span>
<div class="warning">
<span class="assistive-text">1 upper case letter (A-Z)</span>
</div>
<span class="assistive-text success">1 upper case letter (A-Z)</span>
<div class="warning">
<span class="assistive-text">1 upper case letter (A-Z)</span>
</div>
<span class="disclaimer-text">Disclaimer text goes here</span>
<span class="disclaimer-text"><i class="fa-regular fa-circle"></i> 1 upper case letter (A-Z)</span>
<span class="disclaimer-text success"> 1 upper case letter (A-Z)</span>
<div class="success">
<span class="disclaimer-text"><i class="fa-regular fa-check"></i> 1 upper case letter (A-Z)</span>
</div>
<span class="disclaimer-text error"> 1 upper case letter (A-Z)</span>
<div class="error">
<span class="disclaimer-text"><i class="fa-regular fa-xmark"></i> 1 upper case letter (A-Z)</span>
</div>
<ul class="disclaimer-list">
<li><span class="disclaimer-text success"><i class="fa-regular fa-check"></i> 1 upper case letter (A-Z)</span></li>
<li><span class="disclaimer-text success"><i class="fa-regular fa-check"></i> 1 lower case letter (a-z)</span></li>
<li><span class="disclaimer-text error"><i class="fa-regular fa-xmark"></i> 1 number (0-9)</span></li>
<li><span class="disclaimer-text"><i class="fa-regular fa-circle"></i> 1 special character (!@#$%^&*)</span></li>
</ul>