@@include("partials/title-meta.html", {"title": "Form Components"}) @@include('./partials/head-css.html') @@include("partials/body.html")
@@include('./partials/topbar.html', {"pagetitle": "Form Components"}) @@include('./partials/left-sidebar.html')

#### Input Types

Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.

Text
Email
Password
Show/Hide Password
Placeholder
Text area
Readonly
Disabled
Static control
Helping text A block of help text that breaks onto a new line and may extend beyond one line.
Input Select
Multiple Select
Default file input
Date
Month
Time
Week
Number
Color
Range

#### Select menu

Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles.

#### Switches

A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute.

Toggle this switch element
Disabled switch element

#### Checkboxes and radios

Check this custom checkbox
Check this custom checkbox
Toggle this custom radio
Or toggle this other custom radio

#### Floating labels

Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap’s textual form fields. A `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (e.g., `~`).

#### Floating Example

Email address
Password
Comments

#### Selects

Works with selects
Email address
Works with selects

#### Input Sizes

Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.

Small
Normal
Large
Grid Sizes

#### Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs

Static
@
Dropdowns
Buttons
Default file input
Multiple files input

#### Basic Example

Email address We'll never share your email with anyone else.
Password
Check me out !

#### Horizontal form

Email
Password
Re Password
Check me out !

#### Column sizing

As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`.

Email
Password

###### Auto-sizing

Name
Username
@
Remember me

#### Gutters

More complex layouts can also be created with the grid system.

Email
Password
Address
Address 2
City
State
Zip
Check this custom checkbox

#### Custom checkbox - Basic

Supports bootstrap brand colors: `.form-check`, `.form-check-*` etc.

Primary
Success
Danger
Warning
Pink
Info
Dark

#### Custom checkbox - Circled

`.rounded-circle` for roundness.

Primary
Success
Danger
Warning
Pink
Info
Dark

#### Custom checkbox - Disabled

Disabled state also supported.

Can't check this
This too
And this
Can't check this
This too

#### Custom radio - Basic

Supports bootstrap brand colors: `.form-check`, `.form-check-*` etc.

Default
Success
Info
Danger
Info
Primary
Pink
Dark
Default
Success
Info
Danger
Info
Primary
Pink
Dark

#### Custom radio - Disabled

Disabled state also supported.

Zero
One
Two
Three
@@include('./partials/footer.html')
@@include('./partials/right-sidebar.html') @@include('./partials/vendor.html')