Skip to content

Add size (or similar) prop to form input

Our design specs for inputs indicate that there are certain sizes (widths) that are allowed.

While the underlying BFormInput component already has a size prop, that changes the padding/margins around the input. In any case, our styles override that behaviour anyway. I suggest we repurpose the existing size prop to implement these widths.

Screenshot_from_2020-07-24_19-01-36

The sizes are (based on the design spec):

Name (Max) Width
xs 80px
sm 160px
md 240px
lg 320px
xl 560px

Questions

  • What would be the default size? Currently, inputs take up all available width; i.e., they're unbounded. Should that still be possible?
  • Is setting this via max-width sufficient?
Edited by Mark Florian