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

#### 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., `~`).

##### Example

Email address
Password

##### Textareas

Comments

##### Selects

Works with selects

##### Layout

Email address
Works with selects

#### Select

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

Options

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

Each checkbox and radio `<input>` and `<label>` pairing is wrapped in a `<div>` to create our custom control. Structurally, this is the same approach as our default `.form-check`.

Check this custom checkbox
Check this custom checkbox

###### Inline

Check this custom checkbox
Check this custom checkbox

###### Disabled

Check this custom checkbox
Check this custom checkbox

###### Colors

Default Checkbox
Success Checkbox
Info Checkbox
Secondary Checkbox
Warning Checkbox
Danger Checkbox
Dark Checkbox

#### Radios

Each checkbox and radio `<input>` and `<label>` pairing is wrapped in a `<div>` to create our custom control. Structurally, this is the same approach as our default `.form-check`.

Toggle this custom radio
Or toggle this other custom radio

###### Inline

Toggle this custom radio
Or toggle this other custom radio

###### Disabled

Toggle this custom radio
Or toggle this other custom radio

###### Colors

Default Radio
Success Radio
Info Radio
Secondary Radio
Warning Radio
Danger Radio
Dark Radio

#### 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
File input
Multiple files input

#### Custom Switch

Here are a few types of switches.

##### Theme Settings

##### Color Scheme

##### Light

##### Dark

##### Layout Mode

##### Fluid

##### Detached

##### Menu Color

##### Light

##### Dark

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### Hover View

##### Full Layout

##### Hidden

##### Container Width

Full Boxed

##### Layout Position

Fixed Scrollable
Buy Now