Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Input

This section demonstrates the different text input types.

installyarn add @clayui/form
version3.104.0
  • Examples
  • Markup
  • API

Stable3.104.0View in LexiconCHANGELOGstorybook demos

  • Example
  • Disabled
  • Readonly
  • Sizes
  • Textarea
  • Validations
    • Success
    • Warning
    • Error
  • HTML 5 Validations
    • Novalidate Attribute
  • Groups
    • Example
    • Sizes
    • Checkboxes and Radios
    • Button Addons
    • Multiple Addons
    • Separated Addons
    • Mixed Addons
    • Inset

Example

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="basicInputTypeText">Name</label>
	<input
		class="form-control"
		id="basicInputTypeText"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Disabled

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label class="disabled" for="basicInputTypeTextDisabled">Name</label>
	<input
		disabled
		class="form-control"
		id="basicInputTypeTextDisabled"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="basicInputTypeTextReadOnly">User ID</label>
	<input
		readonly
		class="form-control"
		id="basicInputTypeTextReadOnly"
		type="text"
		value="59432"
	/>
</div>

Sizes

Set heights using classes like .form-control-lg and .form-control-sm.

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="smallTextInput">.form-control-sm</label>
	<input
		class="form-control form-control-sm"
		id="smallTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>
<div class="form-group">
	<label for="normalTextInput">Default</label>
	<input
		class="form-control"
		id="normalTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>
<div class="form-group">
	<label for="largeTextInput">.form-control-lg</label>
	<input
		class="form-control form-control-lg"
		id="largeTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Textarea

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="basicInputTypeTextarea">Textarea</label>
	<textarea
		class="form-control"
		id="basicInputTypeTextarea"
		placeholder="Placeholder"
	></textarea>
</div>

Validations

Success

This is a form-feedback-item.
This is a form-feedback-indicator.
This is form-text.
Copied!
Code Sample (expand to see it)
<div class="form-group has-success">
	<label for="inputSuccess1">
		has-success
		<svg
			class="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input class="form-control" id="inputSuccess1" type="text" />
	<div class="form-feedback-group">
		<div class="form-feedback-item">This is a form-feedback-item.</div>
		<div class="form-feedback-item">
			<span class="form-feedback-indicator">
				<svg
					class="lexicon-icon lexicon-icon-check-circle-full"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#check-circle-full" />
				</svg>
			</span>
			This is a form-feedback-indicator.
		</div>
		<div class="form-text">This is form-text.</div>
	</div>
</div>

Warning

This is a form-feedback-item.
This is a form-feedback-indicator.
This is form-text.
Copied!
Code Sample (expand to see it)
<div class="form-group has-warning">
	<label for="inputWarning1">
		has-warning
		<svg
			class="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input class="form-control" id="inputWarning1" type="text" />
	<div class="form-feedback-group">
		<div class="form-feedback-item">This is a form-feedback-item.</div>
		<div class="form-feedback-item">
			<span class="form-feedback-indicator">
				<svg
					class="lexicon-icon lexicon-icon-warning-full"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#warning-full" />
				</svg>
			</span>
			This is a form-feedback-indicator.
		</div>
		<div class="form-text">This is form-text.</div>
	</div>
</div>

Error

This is a form-feedback-item.
This is a form-feedback-indicator.
This is form-text.
Copied!
Code Sample (expand to see it)
<div class="form-group has-error">
	<label for="inputError1">
		has-error
		<svg
			class="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input
		aria-describedby="input-error-1-error-message"
		aria-invalid="true"
		class="form-control"
		id="inputError1"
		type="text"
	/>
	<div class="form-feedback-group">
		<div class="form-feedback-item" id="input-error-1-error-message">
			This is a form-feedback-item.
		</div>
		<div class="form-feedback-item">
			<span class="form-feedback-indicator">
				<svg
					class="lexicon-icon lexicon-icon-exclamation-full"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#exclamation-full" />
				</svg>
			</span>
			This is a form-feedback-indicator.
		</div>
		<div class="form-text">This is form-text.</div>
	</div>
</div>

HTML 5 Validations

The browser default form validation. Submit the form to see it in action.

Please enter letters only.
Please enter numbers only.

Novalidate Attribute

The novalidate attribute on the form element will disable the browser's default validation tooltip. This allows us to display custom validation text while taking advantage of the browser's built in form validation API.

You will need to prevent form submission if there are invalid fields by using the HTMLInputElement.checkValidity() method.

Copied!
Code Sample (expand to see it)
document.addEventListener('submit', function(event) {
	var t = event.target;

	if (t.getAttribute('novalidate') === '') {
		if (t.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
		}

		t.classList.add('was-validated');
	}
});

The was-validated class on the form element displays the success or error messages for :valid and :invalid fields. It should be added when the form is submitted. Documentation on HTML5 form validation attributes can be found on MDN.

This is correct!
Please enter letters only.
Please enter numbers only.
Please enter a valid city.
Please select a state.
Please enter a valid zip code.
Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino.
Copied!
Code Sample (expand to see it)
<form
	action="/docs/components/input/markup.html?#css-html-5-validations-novalidate-attribute"
	novalidate
	method="get"
>
	<div class="form-group-autofit">
		<div class="form-group-item">
			<label for="formValidationLettersOnly1">
				Letters Only
				<svg
					class="lexicon-icon lexicon-icon-asterisk reference-mark"
					focusable="false"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#asterisk" />
				</svg>
			</label>
			<input
				class="form-control"
				id="formValidationLettersOnly1"
				placeholder="Letters Only"
				required
				pattern="^[A-Za-z]+$"
				type="text"
			/>
			<div class="invalid-feedback">
				<span class="form-feedback-indicator">
					<svg
						class="lexicon-icon lexicon-icon-exclamation-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#exclamation-full"
						/>
					</svg>
				</span>
				Please enter letters only.
			</div>
		</div>
		<div class="form-group-item">
			<label for="formValidationNumbersOnly1">
				Numbers Only
				<svg
					class="lexicon-icon lexicon-icon-asterisk reference-mark"
					focusable="false"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#asterisk" />
				</svg>
			</label>
			<input
				class="form-control"
				id="formValidationNumbersOnly1"
				pattern="^[0-9]*$"
				placeholder="Numbers Only"
				required
				type="text"
			/>
			<div class="invalid-feedback">
				<span class="form-feedback-indicator">
					<svg
						class="lexicon-icon lexicon-icon-exclamation-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#exclamation-full"
						/>
					</svg>
				</span>
				Please enter numbers only.
			</div>
		</div>
	</div>
	<div class="btn-group">
		<div class="btn-group-item">
			<button class="btn btn-primary submit-html5-form" type="submit">
				Submit
			</button>
		</div>
	</div>
</form>

Groups

Clay Input Group markup deviates from Bootstrap 4's Input Groups.

Example

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<button class="btn btn-secondary" type="button">Search</button>
		</div>
		<div class="input-group-append input-group-item">
			<input
				aria-label="Search for"
				class="form-control"
				placeholder="Search for..."
				type="text"
			/>
		</div>
	</div>
</div>

<div class="form-group">
	<div class="input-group">
		<div class="input-group-item input-group-prepend">
			<input
				aria-label="Search for second one"
				class="form-control"
				value="email-example@liferay.com"
				type="email"
			/>
		</div>
		<span
			class="input-group-append input-group-item input-group-item-shrink"
		>
			<button class="btn btn-secondary" type="button">Submit</button>
		</span>
	</div>
</div>

Sizes

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn’t supported.

$
.00
$
.00
$
.00
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group input-group-lg">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text">$</span>
		</div>
		<div class="input-group-prepend input-group-item">
			<input
				aria-label="Amount (to the nearest dollar)"
				class="form-control"
				type="text"
			/>
		</div>
		<div
			class="input-group-append input-group-item input-group-item-shrink"
		>
			<span class="input-group-text">.00</span>
		</div>
	</div>
</div>
<div class="form-group">
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text">$</span>
		</div>
		<div class="input-group-item input-group-prepend">
			<input
				aria-label="Amount (to the nearest dollar)"
				class="form-control"
				type="text"
			/>
		</div>
		<div class="input-group-append input-group-item-shrink">
			<span class="input-group-text">.00</span>
		</div>
	</div>
</div>
<div class="form-group">
	<div class="input-group input-group-sm">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text">$</span>
		</div>
		<div class="input-group-item input-group-prepend">
			<input
				aria-label="Amount (to the neareset dollar)"
				class="form-control"
				type="text"
			/>
		</div>
		<div
			class="input-group-append input-group-item input-group-item-shrink"
		>
			<span class="input-group-text">.00</span>
		</div>
	</div>
</div>

Checkboxes and Radios

Place any checkbox or radio option within an input group’s addon instead of text.

Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text input-group-text-secondary">
				<div class="custom-control custom-checkbox">
					<label>
						<input
							aria-label="Checkbox for following text input"
							class="custom-control-input"
							type="checkbox"
						/>
						<span class="custom-control-label"></span>
					</label>
				</div>
			</span>
		</div>
		<div class="input-group-append input-group-item">
			<input
				aria-label="Text input with checkbox"
				class="form-control"
				value="Select this option?"
				type="text"
			/>
		</div>
	</div>
</div>

<div class="form-group">
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text input-group-text-secondary">
				<div class="custom-control custom-radio">
					<label>
						<input
							aria-label="Radio button for following text input"
							class="custom-control-input"
							type="radio"
						/>
						<span class="custom-control-label"></span>
					</label>
				</div>
			</span>
		</div>
		<div class="input-group-append input-group-item">
			<input
				aria-label="Text input with radio button"
				class="form-control"
				type="text"
				value="Select this option?"
			/>
		</div>
	</div>
</div>

Button Addons

  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<button class="btn btn-secondary" type="button">Search</button>
		</div>
		<div class="input-group-append input-group-item">
			<input
				aria-label="Search for"
				class="form-control"
				placeholder="Search for..."
				type="text"
			/>
		</div>
	</div>
</div>

<div class="form-group">
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				Action<span class="inline-item inline-item-after"
					><svg
						class="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom" /></svg
				></span>
			</button>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="#1">Action</a></li>
				<li><a class="dropdown-item" href="#1">Another action</a></li>
				<li>
					<a class="dropdown-item" href="#1">Something else here</a>
				</li>
				<li class="dropdown-divider"></li>
				<li><a class="dropdown-item" href="#1">Separated link</a></li>
			</ul>
		</div>
		<div class="input-group-append input-group-item">
			<input
				aria-label="Text input with dropdown button"
				class="form-control"
				type="text"
			/>
		</div>
	</div>
</div>

<div class="form-group">
	<div class="input-group">
		<div class="input-group-item input-group-prepend">
			<input
				aria-label="Text input with segmented button dropdown"
				class="form-control"
				type="text"
			/>
		</div>
		<div
			class="input-group-prepend input-group-item input-group-item-shrink"
		>
			<button class="btn btn-secondary" type="button">Action</button>
		</div>
		<div
			class="input-group-append input-group-item input-group-item-shrink"
		>
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom" />
					</svg>
				</span>
			</button>
			<ul class="dropdown-menu dropdown-menu-right">
				<li><a class="dropdown-item" href="#1">Action</a></li>
				<li><a class="dropdown-item" href="#1">Another action</a></li>
				<li>
					<a class="dropdown-item" href="#1">Something else here</a>
				</li>
				<li class="dropdown-divider"></li>
				<li><a class="dropdown-item" href="#1">Separated link</a></li>
			</ul>
		</div>
	</div>
</div>

Multiple Addons

@
.com
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group">
		<div class="input-group-item input-group-prepend">
			<input
				class="form-control"
				placeholder="email-example"
				type="text"
			/>
		</div>
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text">@</span>
		</div>
		<div class="input-group-item input-group-prepend">
			<input class="form-control" placeholder="liferay" type="text" />
		</div>
		<div
			class="input-group-append input-group-item input-group-item-shrink"
		>
			<span class="input-group-text">.com</span>
		</div>
	</div>
</div>

Separated Addons

@
@
.com
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group">
		<div class="input-group-item input-group-item-shrink">
			<span class="input-group-text" id="basicAddon1">@</span>
		</div>
		<div class="input-group-item">
			<input
				aria-describedby="basicAddon1"
				aria-label="Username"
				class="form-control"
				placeholder="Username"
				type="text"
			/>
		</div>
	</div>
</div>

<div class="form-group">
	<div class="input-group">
		<div class="input-group-item">
			<input class="form-control" placeholder="Email" type="text" />
		</div>
		<div class="input-group-item input-group-item-shrink">
			<span class="input-group-text">@</span>
		</div>
		<div class="input-group-item">
			<input class="form-control" placeholder="liferay" type="text" />
		</div>
		<div class="input-group-item input-group-item-shrink">
			<span class="input-group-text">.com</span>
		</div>
	</div>
</div>

Mixed Addons

@
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="input-group">
		<div class="input-group-item input-group-item-shrink">
			<span class="input-group-text" id="basicAddon1">@</span>
		</div>
		<div class="input-group-item input-group-prepend">
			<input
				aria-describedby="basicAddon1"
				aria-label="Username"
				class="form-control"
				placeholder="Username"
				type="text"
			/>
		</div>
		<div
			class="input-group-append input-group-item input-group-item-shrink"
		>
			<button class="btn btn-secondary" type="submit">Submit</button>
		</div>
	</div>
</div>

Inset

You can insert buttons and links into input group items with the following helper classes: .input-group-inset, .input-group-inset-before, .input-group-inset-after, .input-group-inset-item, .input-group-inset-item-before, and .input-group-inset-item-after. Use the -before classes to inset the button/link at the beginning of the input group, or use the -after classes to inset the button/link at the end of the input group.

To retain the focus styles around the `.input-group-inset` component when a button or link inside is focused, add the focus class to the `.input-group-item`. Focus Box Shadows are only supported in `.input-group-inset` with `.input-group-item.focus`. `.input-prepend` and `.input-append` aren't supported with `.input-group-inset`.
Copied!
Code Sample (expand to see it)
<div class="input-group">
	<div class="input-group-item">
		<input
			aria-label="Search for"
			class="form-control input-group-inset input-group-inset-after"
			placeholder="Search..."
			type="text"
		/>
		<div class="input-group-inset-item input-group-inset-item-after">
			<button class="btn btn-unstyled d-md-none" type="button">
				<svg
					class="lexicon-icon lexicon-icon-times"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
			<button
				class="btn btn-unstyled d-none d-md-inline-block"
				type="button"
			>
				<svg
					class="lexicon-icon lexicon-icon-search"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
		</div>
	</div>
</div>

<div class="input-group">
	<div class="input-group-item">
		<input
			aria-label="Search for"
			class="form-control input-group-inset input-group-inset-after"
			placeholder="Search..."
			type="text"
		/>
		<div class="input-group-inset-item input-group-inset-item-after">
			<button class="btn btn-unstyled" type="button">
				<svg
					class="lexicon-icon lexicon-icon-times-circle"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#times-circle" />
				</svg>
			</button>
			<button class="btn btn-unstyled" type="button">
				<svg
					class="lexicon-icon lexicon-icon-search"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
		</div>
	</div>
</div>

<div class="input-group">
	<div class="input-group-item">
		<input
			aria-label="Enter email"
			class="form-control input-group-inset input-group-inset-after"
			placeholder="Enter Email..."
			type="email"
		/>
		<div class="input-group-inset-item input-group-inset-item-after">
			<button class="btn btn-secondary" type="button">Submit</button>
		</div>
	</div>
</div>

<div class="input-group">
	<div class="input-group-item">
		<input
			aria-label="Search for"
			class="form-control input-group-inset input-group-inset-before"
			placeholder="Search..."
			type="text"
		/>
		<div class="input-group-inset-item input-group-inset-item-before">
			<button class="btn btn-unstyled" type="button">
				<svg
					class="lexicon-icon lexicon-icon-search"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
		</div>
	</div>
</div>

<div class="input-group">
	<div class="input-group-item">
		<input
			aria-label="Enter email"
			class="form-control input-group-inset input-group-inset-before"
			placeholder="Enter Email..."
			type="email"
		/>
		<div class="input-group-inset-item input-group-inset-item-before">
			<button class="btn btn-secondary" type="button">Submit</button>
		</div>
	</div>
</div>

Password

A pattern for displaying the content inside a password input. Use .input-text-label inside .input-group-inset-item to display specific content for .form-control[type="text"] and .input-password-label for .form-control[type="password"].

This requires custom Javascript to toggle the input type between text and password.
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="passwordFieldHidden">Password Field Hidden</label>
	<div class="input-group input-group-password">
		<div class="input-group-item">
			<input
				aria-label="Password Hidden"
				class="form-control input-group-inset input-group-inset-after"
				id="passwordFieldHidden"
				type="password"
				value="my-seekret"
			/>
			<div class="input-group-inset-item input-group-inset-item-after">
				<button class="btn btn-unstyled" type="button">
					<span class="input-text-label">
						<svg
							class="lexicon-icon lexicon-icon-hidden"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#hidden" />
						</svg>
					</span>
					<span class="input-password-label">
						<svg
							class="lexicon-icon lexicon-icon-view"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#view" />
						</svg>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

<div class="form-group">
	<label for="passwordFieldVisible">Password Field Visible</label>
	<div class="input-group input-group-password">
		<div class="input-group-item">
			<input
				aria-label="Password Visible"
				class="form-control input-group-inset input-group-inset-after"
				id="passwordFieldVisible"
				type="text"
				value="my-seekret"
			/>
			<div class="input-group-inset-item input-group-inset-item-after">
				<button class="btn btn-secondary" type="button">
					<span class="input-password-label">Show</span>
					<span class="input-text-label">Hide</span>
				</button>
			</div>
		</div>
	</div>
</div>

<div class="form-group">
	<label class="disabled" for="passwordFieldDisabled"
		>Password Field Disabled</label
	>
	<div class="input-group input-group-password">
		<div class="input-group-item">
			<input
				aria-label="Password Disabled"
				class="form-control input-group-inset input-group-inset-after"
				disabled=""
				id="passwordFieldDisabled"
				type="password"
				value="my-seekret"
			/>
			<div class="input-group-inset-item input-group-inset-item-after">
				<button class="btn btn-unstyled" disabled="" type="button">
					<span class="input-password-label">
						<svg
							class="lexicon-icon lexicon-icon-view"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#search" />
						</svg>
					</span>
					<span class="input-text-label">
						<svg
							class="lexicon-icon lexicon-icon-view"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#search" />
						</svg>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

How can this be improved? Create an issue!