# Inputs

###### Form inputs styled and customizable input elements using classes like `.form-control`, `.form-check`, and `.form-select` for consistent design and functionality.

## General inputs

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

Text
Email
Password
Placeholder
Text area
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 and time
Date
Month
Week
Time
Time
Number
Color
Range (form-control)
Range
Select (custom)
File Browser

## General inputs (disabled)

Add disabled to an `<input>`, `<select>`, or `<button>` to block interactions, with Bootstrap styling them accordingly. Controls inside a `<fieldset disabled>` are also disabled. For `<a>` elements, Bootstrap uses `pointer-events: none;` and reduced opacity instead.

Text disabled
Email disabled
Password disabled
Placeholder disabled
Text area disabled
Static control disabled
Helping text disabled
A block of help text that breaks onto a new line and may extend beyond one line.
Input Select disabled
Multiple Select disabled
Default file input disabled
Date and time disabled
Date disabled
Month disabled
Week disabled
Time disabled
Time disabled
Number disabled
Color disabled
Range disabled
Range (disabled)
Select (disabled)
File Browser (disabled)

## Floating Labels

Email address
Password
Comments
Works with selects

## Floating Labels (Disabled)

Email address
Password
Comments
Works with selects

## Input Sizes

Set heights using classes like `.form-control-lg`, `.form-control-sm` and for custom inputs, you can use `.form-select-sm`, `.form-select-lg`, and set widths using grid column classes like `.col-lg-*`
Small
Normal
Large
Grid Sizes
Check out how it works

## Altering with utilities

You can easily alter the border, border-radius and padding using the utility classes.
Square edges
Rounded pill
Material
Border color

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode