Skip to content

input-group.mdx

Latest commit

 

History

History
305 lines (247 loc) · 13.8 KB

input-group.mdx

File metadata and controls

305 lines (247 loc) · 13.8 KB
Raw
title Input group
description Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
toc true

Basic example

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.

<Example code={`

@

@example.com
Your vanity URL
Example help text goes outside the input group.
$ .00
@
With textarea <textarea class="form-control" aria-label="With textarea"></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.

<Example code={`

@

`} />

Border radius

Due to limitations of browser support at the time, border-radius styles can only be applied to the first and last children within the .input-group class. Any non-visible element in one of those positions will cause the input group to render incorrectly. This will unfortunately not be fixed until v6 most likely.

<Example code={`

@

`} />

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.

Sizing on the individual input group elements isn’t supported.

<Example code={`

Small

Default
Large
`} />

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.

<Example code={`

`} />

Multiple inputs

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

<Example code={`

First and last name

`} />

Multiple addons

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

<Example code={`

$ 0.00

$ 0.00
`} />

Button addons

<Example code={`

Button

Button
Button Button
Button Button
`} />

Buttons with dropdowns

<Example code={`

`} />

Segmented buttons

<Example code={`

`} />

Custom forms

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

Custom select

<Example code={`

Options Choose... One Two Three

Choose... One Two Three Options
Button Choose... One Two Three
Choose... One Two Three Button
`} />

Custom file input

<Example code={`

Upload

Upload
Button
Button
`} />

CSS

Sass variables