• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Input Group

  2. Form Controls
  3. Input Group

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

Custom file input

Input groups include support for custom selects and custom file uploads

Buttons with dropdowns

Use the.input-group and [aria-label='']

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

Sizing

Add the relative form sizing classes to the .input-group

Small
Default
Large

Multiple inputs

While multiple <input>

First and last name
$0.00
$0.00

Basic input groups

Place one add-on or button on either side of an input. <label> outside the input group.

Basic
@
@example.com
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..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.<label> outside the input group.

0.00