Input Groups | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Input Groups

##### Button Addons

Multiple add-ons are supported and can be mixed with buttons input versions.

##### Custom Forms

Input groups include support for `custom selects and custom file inputs`. Browser default versions of these are not supported.

Options
Options

##### Custom File Input

Input groups include support for custom selects and custom `file uploads`. Browser default versions of these are not supported.

Upload
Verify

##### Buttons with Dropdowns

Use `input-group` and `[aria-label='']` through buttons with dropdowns.

##### Segmented Buttons

Multiple add-ons are supported and can be mixed with`dropdowns` versions.

##### Checkboxes and Radios

Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `mt-0` to the `form-check-input` when there's no visible text next to the input.

##### Sizing

Add the relative form sizing classes to the`input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Small
Default
Large

##### Multiple Inputs

While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.

First and Last Name
$0.00
$0.00

##### Basic Input Groups

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>`s outside the input group.

###### Basic

@
@example.com
Your Vanity URL
https://example.com/
$ .00
@
With Textarea

###### Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with `flex-nowrap`.

@

##### Variation of Addons

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>`s outside the input group.

Left Addon
Right Addon
Joint Addon
0.00
Left & Right Addon
Solid Style
Flat Style
Raise Style
Left & Right Addon