H HUD ADMIN

# Form Elements page header description goes here...

#### Form controls

Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. Please read the official Bootstrap documentation for the full list of options.

Text input
Textarea
File input
Select dropdown
Multiple select

#### Sizing

Set heights using classes like `.form-control-lg` and `.form-control-sm`.

#### Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

#### Readonly plain text

If you want to have `<input readonly>` elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Email
Password

#### Range inputs

Set horizontally scrollable range inputs using `.form-range`.

Example range input
Disabled range

#### Checkboxes

Default checkboxes are improved upon with the help of `.form-check`, a single class for both input types that improves the layout and behavior of their HTML elements.

DEFAULT CHECKBOX
Default checkbox
Checked checkbox
Disabled checkbox
INLINE CHECKBOX
1
2
3 (disabled)

#### Radios

Default radios are improved upon with the help of `.form-check`, a single class for both input types that improves the layout and behavior of their HTML elements. You can use Bootstrap custom radio for styled radio button.

DEFAULT RADIO
Default radio button
Checked radio button
Disabled radio button
INLINE RADIO
1
2
3 (disabled)

#### 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
Checked switch element
Disabled switch element

#### Select menu

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

DEFAULT
SIZING

#### File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Default file input example
Multiple files input example
Disabled files input example
Small file input example
Large file input example

#### Form grid

More complex forms can be built using bootstrap grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Email
Password
Radios
First radio
Second radio
Third disabled radio
Checkbox
Example checkbox

#### Help text

Block-level help text in forms can be created using `.form-text`. Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`.

Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

#### Input group

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<label>` outside the input group.

@ .com

#### Validation

Provide valuable, actionable feedback to your users with HTML5 form validation. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

Valid input
Looks good!
Invalid input
Please provide a name
Input group
@
Please choose a username.
Select dropdown
Please select a valid state.
Textarea
Please enter a message in the textarea.
Agree to terms and conditions
You must agree before submitting.

Tooltip valid
Looks good!
Tooltip invalid
@
Field is required
Tooltip dropdown
Please select a valid state.

Display Mode
Dark
Light
Theme Color
Theme Cover