Clay CSS v3.9.0

Form Elements (Input Groups)

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

Input Group (Separated)

Wrap each item in a .input-group with .input-group-item. The class .input-group-item splits the space evenly by default, add .input-group-item-shrink to make an item shrink to fit.

@
@
.com

Input Group (Connected)

Create connected .input-group's by adding .input-group-prepend to every .input-group-item and .input-group-append to the last .input-group-item.

@
@
.com
@example.com
http://www.liferay.com
/
$
.00

Input Group (Mixed)

Mix the two.

@
http://www.liferay.com
/

Input Group Inset

.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.

To retain the focus styles around the .input-group-inset component when a button or link inside is focused, add the focus class on .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.

Input Group 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.

Input Group Text Secondary

Input Group Buttons

Input Group Stacked Sm Down

Add class input-group-stacked-sm-down on input-group to make input-group-item stack and input-group-item-shrink inline at screen sizes less than 576px.

Input Group Sizes

$
.00
$
.00
$
.00
$
$

Form Control Tag Group

A pattern for placing labels in an input. See Form Elements (Multi Select) for full clay-multiselect markup.

This component requires custom javascript. The class focus must be managed when interacting with this component. It must be added/removed on form-control-tag-group when any item in form-control-tag-group is focused/blurred.

If form-control-tag-group is clicked, form-control-inset must be focused.
thumbnail wall thumbnail wallpaper thumbnail wonderwall winterfell ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
thumbnail wall thumbnail wallpaper thumbnail wonderwall winterfell ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre

Form Control Tag Group With Contenteditable Elements

The major advantage of using contenteditable elements over an input is allowing text to be separated by newline and having the "input" grow with the text. One caveat is width: 100%; or .w-100 must be added on .form-control-inset when a newline is entered and removed when there are no newlines present.

This pattern requires updating .form-control-hidden with the text inside the contenteditable element. It also requires careful management of the focus state as well as the tabindex on .form-control-hidden.
thumbnail wall thumbnail wallpaper thumbnail wonderwall winterfell kings landing some value