Forms

Bootstrap-aligned form patterns with TactileGlass materials. Prefer tg-select / details.form-select for selects; native select.form-select remains available.

Overview

Layer labels, controls, and validation feedback. Material classes (tg-neu, tg-glass, tg-hybrid) paint the control.

Form control

Email address Textarea

Sizing

Form text

Password

Must be 8–20 characters.

Disabled / readonly

File & color

Color picker

Select

Dropdown-nature select via details.tg-select (or details.form-select). Same menu pattern as tg-dropdown.

Production

Small

Large

Native fallback:

Checks & radios

Checks

Default checkbox

Checked checkbox

Indeterminate

Indeterminate checkbox

Disabled

Disabled checkbox

Disabled checked

Radios

Default radio

Second radio

Disabled radio

Switches

Default switch

Disabled switch

Inline & reverse

1

2

A

Reverse checkbox

Range

Example range

Input group

Basic

@

@example.com

$ .00

Sizing

Small

Large

Checkboxes and radios

Multiple inputs & addons

First and last name

$ 0.00

Button addons

Buttons with dropdowns

Segmented buttons

Custom select in group

Options

Choose…

Floating labels

Email address

Comments

Layout

Utilities

Example label

Another label

Form grid & gutters

Horizontal form

Email

Password

Radios

First radio

Second radio

Auto-sizing / inline

Validation

Scope :valid / :invalid with .was-validated (after submit), or use server-side .is-valid / .is-invalid. See Bootstrap validation.

Custom styles

First name

Looks good!

Last name

Looks good!

Username

@

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Server-side

Valid

Looks good!

Invalid

Please provide a value.