Basic Inputs

HTML5 provides standard input types with specialized keyboards, validation, and browser controls.

Use the data-pr-toggle-password attribute on a password input to dynamically generate a unified input group with a toggle control. Supports both icon (default) and text modes.

Textareas use .form-control with the textarea element for multi-line user input.

Select elements use .form-select for custom styled dropdowns, and support sizing and multi-selection.

Datalists provide native autocomplete options when typing into an input field using the datalist element.

Choose City

File inputs use .form-control with type="file". They support multiple selections and sizing variations.

Wrap a .form-control and a label inside a .form-floating container to create floating labels.

Checkboxes use .form-check, .form-check-input and .form-check-label. Inline variants use .form-check-inline.

Radio buttons use .form-check with type="radio". Use .form-check-inline for horizontal layout.

Switches have the markup of a custom checkbox but use the .form-switch class for toggle switch behavior.

Create custom horizontal range inputs using the .form-range class.

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

Native HTML5 picker controls provide browser-supported pickers for dates, times, and calendar weeks.

Color inputs use the .form-control-color class with type="color" for native swatch pickers.

Use the readonly attribute to prevent modification. Use .form-control-plaintext to remove standard form styling and keep normal margin and padding.

Add the disabled boolean attribute on an input to prevent user interactions and render lighter styling.