Lab

Exploring

lab · exploring

Control sizes side by side

Button, Input, Select, native Select and the InputRange fader at every size on one row, with each box's measured height and font, to prove they share the Control Var Contract.

frameworksastro
Exploringbuttoninputselectselect-nativeinput-range
scenarioOne row per size

Every box in a row should report the same height, font and radius.

xs

  • Pastel

  • Vivid

  • Mono

sm

  • Pastel

  • Vivid

  • Mono

md

  • Pastel

  • Vivid

  • Mono

lg

  • Pastel

  • Vivid

  • Mono

scenarioMultiselect chips

The chip field should rest at the row height, with chips sitting inside it.

xs

  • Pastel

  • Vivid

  • Mono

sm

  • Pastel

  • Vivid

  • Mono

md

  • Pastel

  • Vivid

  • Mono

lg

  • Pastel

  • Vivid

  • Mono