Context/background

Currently, TextInput, Select, and Combobox have a min-width of 256px. This is applied in code and in Figma.

Problem

In certain layouts, such as some new designs, the form itself has a max-width of 512px, determined in the Constructing forms guidelines in the Style Guide and meant to prevent unnecessarily long inputs when desired in forms. In such cases, when there is a fieldset or multiple columns, two fields next to one another using a TextInput and Select, for example, need to be shorter than 256px. Example below.

Proposed solution

To ensure flexibility and ability to create certain interfaces, I propose we remove the restriction on the component, and instead lead with guidance on why 256px is the preferred min-width, except when labels and input values will be short, even when translated to other languages, etc. etc. This guidance would be provided on the Field component page.

Final decision

As discussed internally with the DST, the 256px min-width implemented in code can be overwritten by CSS, so it could be customized in some cases to a smaller width if necessary. So we will maintain the base min-width 256px in Select, TextInput, and Combobox as it is now.

Acceptance criteria (or Done)

• Figma library:
  • Figma component: remove the min-width in Select, TextInput, and Combobox
  • Figma specs: clarify that the default min-width is 256px to prevent errors, but it can be customized to a smaller size if necessary.

Future task

• Guidelines in Codex: Include the same information as in Figma in the new "Minimum and Maximum". This will be done in T358859.