Open MCT Style Guide: Controls
Intro about controls
Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.
Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a span
with class .title-label
.
Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.
The basic structure is a label
with a checkbox-type input and an em
element inside. The em
is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the label
allows the label itself to act as a clickable element.
Radio buttons use the same technique as checkboxes above.
Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The select
element is wrapped by another element, such as a div
, which acts as the main display element for the styling. The select
provides the click and select functionality, while having all of its native look-and-feel suppressed.