Input
Input and form elements look decent out of the box with the default hgrid styles.
File locations: sass/input/_input.scss and
input/_form.scss (GitHub)
The signal colors used for checkboxes, radio buttons, buttons and focus
outline can be set in the global variables. The styles are slightly
opinionated, but conservative, CSS-only and respectful of browser
functionality. You can add extra styling with utility classes such as
radius-{x} for border-radius, mt- for margin-top,
.block for display:block, etc.
Checkboxes and radio buttons are entirely custom styled, reflecting your
customized $theme-color-primary.
<input type="file"> as well as infrequently used input
types such as type="color" and type="range" have
their factory settings *. Maintaining styling hacks for all these is beyond
the scope of the hgrid package.
fieldset, legend and label elements will have some default styling applied.
Pseudo-selectors like :disabled and :readonly will be reflected visually. Examples below.
Example Form
| Related Classes | Description |
|---|---|
| .disabled |
Grays out label and text elements for use with the
:disabled input state. Cursor not-allowed.
|
| .readonly |
Grays out label and text elements for use with the
:readonly input state. Cursor not-allowed.
|
| .secondary |
Lighter variant of button,
input[type=submit] and [type=reset]
|
| .negative |
Negative variant of button,
input[type=submit] and [type=reset]. Can be combined with .outline
|
| .outline |
Outline variant of button,
input[type=submit] and [type=reset]
|
Radio buttons and checkboxes are inline elements and will display next to
each other horizontally. Add class="block" to make them stack
vertically. Buttons and input type buttons are displayed as block elements
out of the box. Add .inline or .inline-block to
display them horizontally.
*) An exception: We have cleaned up
<input type="file"> a little bit by removing default
padding and border around the button and added some margin.
← Previous: Utility Classes
Next: Typography →