Input Controls

General Notes

  • Input controls should usually be accompanied by a text label, usually to the left or directly above. Checkboxes and radio buttons are the exception--these have labels to the right.

  • Use the system's focus states for controls instead of creating them custom. This will ensure that the controls are accessible.

  • Shadows for slider circles, toggle switches, combo boxes, and number box arrows are: offset: 0px, y-offset: 1px, blur: 3px, light theme: 15% black, dark theme: 20% black.

  • Disabled states are the normal active state at 50% opacity.