Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Contents
- Overview
- Text Inputs
- Label, Legend, and Static Sizing
- Disabled States
- Help Text
- Checkboxes and Radios
- File Browser
- Range
- Color Picker
- Layout
- Validation
- SASS Reference
Overview
Figuration’s form controls expand on the Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g., email
for email address or number
for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Alternatives to Hidden Labels
Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only
class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label
, aria-labelledby
or title
attribute. If none of these are present, assistive technologies may resort to using the placeholder
attribute, if present, but note that use of placeholder
as a replacement for other labelling methods is not advised.
Text Inputs
Textual form controls—like <input>
s, <select>
s, and <textarea>
s—are styled with the .form-control
class. Included are styles for general appearance, focus state, sizing, and more.
Control Sizing
By default, .form-control
uses em
units for sizing so that they will scale with their explicit font-size
.
You can also set heights and font-sizes using component sizing classes, such as:
.form-control-xsmall
.form-control-small
.form-control-large
.form-control-xlarge
The sizing classes also work on other inputs such as <select>
s and <textarea>
s.
Readonly Inputs
Add the readonly
boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Static Inputs
When you want to have readonly
fields in your form styled as plain text, use the .form-control-static
class to remove the default form field styling and preserve the correct margin and padding.
Label, Legend, and Static Sizing
Just like sizing the form inputs, you can size <label>
s, <legends>
, and static controls with:
.form-label-xsmall
.form-label-small
.form-label-large
.form-label-xlarge
Disabled States
Add the disabled
attribute on an input to prevent user interactions and make it appear lighter in color.
Add the disabled
attribute to a <fieldset>
to disable all the controls within.
Caveat About Link Functionality of <a>
By default, browsers will treat all native form controls (<input>
, <select>
and <button>
elements) inside a <fieldset disabled>
as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*">
elements, these will only be given a style of pointer-events: none
. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in all browsers, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
Cross-browser Compatibility
While Figuration will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled
attribute on a <fieldset>
. Use custom JavaScript to disable the fieldset in these browsers.
Help Text
Block-level help text in forms can be created using .form-text
. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted
.
Associating Help Text With Form Controls
Help text should be explicitly associated with the form control it relates to using the aria-describedby
attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.
Help text below inputs can be styled with .form-text
. This class includes display: block;
and adds some top margin for easy spacing from the inputs above.
Inline text can use any typical inline HTML element (be it a <small>
, <span>
, or something else), optionally using utility classes.
Checkboxes and Radios
Default checkboxes and radios are improved upon with the help of .form-check
, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported by using the disabled
attribute on the <input>
, or by being inside a disabled <fieldset>
, and will lighten the text color of a sibling .form-check-label
to help indicate the input’s state.
The .form-check
container has a padding-left
so that the siblings of the <input>
(such as <label>
, help text, or validation feedback) are easily aligned.
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check
.
Custom Style
For even more customization and cross browser consistency, use our stylized form elements to replace the browser defaults.
Add the .form-checkradio
modifier class to a .form-check
to enable the stylized inputs. The visual treatment is determined from the type
attribute on the <input>
.
We hide the default <input>
with opacity
and use a <label>
element with .form-check-label
to build the stylized indicator in its place with ::before
and ::after
. Unfortunately we can’t build a custom one from just the <input>
because CSS does not support content
, appearance
in IE 11, or pseudo-elements on that element.
We also use the sibling selector (~
) and the <input>
states—like :checked
—to style the form indicator and <label>
text for each item.
Stylized checkboxes can also utilize the :indeterminate
pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
In the checked and indeterminate states, we use icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
For the indeterminate checkbox above we are using the following script:
Switch
In similar fashion to the stylized checkbox and radio input, transform either of the input types to a stylized toggle switch by the using the .form-switch
modifier class instead.
Without Labels
You can use .form-check
without labels, but you will still need to provide some form of label for assistive technologies (for instance, using aria-label
).
However, the stylized inputs will need to keep their label in order for the visual input to appear.
External Labels
Label can be supplied outside of the .form-check
container also.
Inline
Group checkboxes or radios on the same horizontal row by using display
and margin
utility classes, such as .d-inline-block
and .me-1
.
Sizing
Our custom checkbox, radio, and switch inputs use em
for sizing, so that they will scale with their explicit or inherited font-size
.
You can also set a font-size
on the .form-check
container, then reset font-size
of content inside the <label>
.
File Browser
Using .form-file
as a wrapper, we hide the default file <input>
via opacity
and instead style the <label>
with some additional child elements to recreate the filename text and button portions of the input. A width
and height
are also set on the <input>
for proper spacing for surrounding content.
The file input requires additional JavaScript if you would like to have a functional Choose file… and selected file name text.
Longer filename text is truncated and an ellipsis is added when there’s not enough space.
Range
Create custom <input type="range">
controls with .form-range
. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. We also hide the tooltip provided only by IE to maintain cross-browser consistency.
Range inputs have implicit values for min
and max
—0
and 100
, respectively. You may specify new values for those using the min
and max
attributes.
By default, range inputs “snap” to integer values. To change this, you can specify a step
value. In the example below, we double the number of steps by using step="0.5"
.
Color Picker
<input type="color">
element need only a custom class, .form-color
to trigger the custom styles.
Browser Compatibility
While Figuration supports styling <input type="color">
elements, some browsers don’t. Use custom JavaScript to handle it in these browsers. For support details, see Can I Use.
Layout
Since Figuration applies display: block
and width: 100%
to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
Form Groups
The .form-group
class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom
, but it picks up additional styles in .form-inline
as needed. Use it with <fieldset>
s, <div>
s, or nearly any other element.
Form Grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
Grid-based form layouts also support control sizing.
Form Row
You may also swap .row
for .form-row
, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
More complex layouts can also be created with the grid system.
Horizontal Form
Create horizontal forms with the grid by adding the .row
class to form groups and using the .col-*-*
classes to specify the width of your labels and controls. Be sure to add .form-label
to your <label>
s as well so they’re vertically centered with their associated form controls.
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top
on our stacked radio inputs label to better align the text baseline.
Column Sizing
As shown in the previous examples, our grid system allows you to place any number of .col
s within a .row
. They will split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .col
s equally split the rest, with specific column classes like .col-7
.
Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes .col
to .col-auto
so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
Here is the same form, but this time using specified column widths
Inline Forms
Use the .form-inline
class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
- Controls are
display: flex
, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities. - Controls and input groups receive
width: auto
to override the Figuration defaultwidth: 100%
. - Controls only appear inline in viewports that are at least 36em/576px wide to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, as shown below, you should always include a <label>
with each form control, even if you need to hide it from non-screenreader users with .sr-only
.
Custom form controls and selects are also supported.
Validation
Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).
How It Works
Here’s how form validation works:
- HTML form validation is applied via CSS’s two pseudo-classes,
:invalid
and:valid
. It applies to<input>
,<select>
, and<textarea>
elements. - The
:invalid
and:valid
styles are scoped to a parent.was-validated
class, usually applied to the<form>
. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted). - To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the
.was-validated
class from the<form>
again after submission. - As a fallback,
.is-invalid
and.is-valid
classes may be used instead of the pseudo-classes for server side validation. They do not require a.was-validated
parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a
<label>
that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
- Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
- You may provide custom validity messages with
setCustomValidity
in JavaScript.
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
Custom Styles
For custom form validation messages, you’ll need to add the novalidate
boolean attribute to your <form>
. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you.
When attempting to submit, you’ll see the :invalid
and :valid
styles applied to the form controls.
Custom feedback styles apply custom colors, borders, focus styles, feedback messages, and optional background icons to better communicate feedback.
Browser Defaults
Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
Server Side
We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid
and .is-valid
. Note that .invalid-feedback
is also supported with these classes.
Supported Elements
Validation styles are supported for the following form controls and components:
<input>
s,<textarea>
s, and<select>
s using.form-control
(only supports one.form-control
in input groups).form-check
s with either native of custom variants.form-file
Tooltips
If your form layout allows it, you can swap the .{valid|invalid}-feedback
classes for .{valid|invalid}-tooltip
classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative
on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
Icons
Optional visual icon representations of the validation state can be added to textual <input class="form-control">
, <textarea class="form-control">
, and <select class="form-control">
elements by adding a .has-validation-icon
class.
- Validation icons are
url()
s configured via Sass variables that are applied tobackground-image
rules for each state. - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
- Icons can also be disabled entirely by setting the
$enable-form-validation-icon
variable tofalse
in the Sass.
Customizing
Validation states can be customized via Sass with the $form-validation-states
map. Located in our _settings.scss
file, this Sass map is looped over to generate the default valid
/invalid
validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that we do not recommend customizing these values without also modifying the form-validation-state
mixin.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for forms.
Name | Type | Default | Description |
---|---|---|---|
$enable-form |
boolean | true |
Enable the generation of the form classes.
Smaller segements of the form classes can be disabled with the following $enable-* variables.
|
$enable-form-control |
boolean | true |
Enable the generation of the textual form control rules. |
$enable-form-control-sizing |
boolean | true |
Enable the generation of the sizing classes for form controls. |
$enable-form-control-static |
boolean | true |
Enable the generation of the static form control class. |
$enable-form-label |
boolean | true |
Enable the generation of the form control label class. |
$enable-form-label-sizing |
boolean | true |
Enable the generation of the sizing classes for form control labels. |
$enable-form-text |
boolean | true |
Enable the generation of the form text class. |
$enable-form-check |
boolean | true |
Enable the generation of the stacking layout for checkbox and radio inputs. |
$enable-form-check-checkradio |
boolean | true |
Enable the generation of the custom styles for checkbox and radio inputs. |
$enable-form-check-switch |
boolean | true |
Enable the generation of the custom switch styles for checkbox and radio inputs. |
$enable-form-file |
boolean | true |
Enable the generation of the classes for file inputs. |
$enable-form-range |
boolean | true |
Enable the generation of the classes for custom range inputs. |
$enable-form-color |
boolean | true |
Enable the generation of the classes for custom color inputs. |
$enable-form-group |
boolean | true |
Enable the generation of the form group classes. |
$enable-form-row |
boolean | true |
Enable the generation of the form row classes. |
$enable-form-inline |
boolean | true |
Enable the generation of the inline form classes. |
$enable-form-validation |
boolean | true |
Enable the generation of the form validation classes. |
$enable-form-validation-feeback |
boolean | true |
Enable the generation of the form validation text feedback classes. |
$enable-form-validation-tooltip |
boolean | true |
Enable the generation of the form validation tooltip classes. |
$enable-form-validation-icon |
boolean | true |
Enable the generation of the form validation icon class. |
$input-font-family |
string | null |
Base input font family. |
$input-font-size |
string | $btn-font-size |
Base input font size. |
$input-font-weight |
string | $font-weight-normal |
Base input font weight. |
$input-line-height |
string | $btn-line-height |
Base input line height. |
$input-padding-y |
string | $btn-padding-y |
Base input vertical padding. |
$input-padding-x |
string | $btn-padding-x |
Base input horizontal padding. |
$input-sizes |
string | $component-sizes |
Input size variants. |
$input-bg |
string | $white |
Input background color for inactive state. |
$input-color |
string | $uibase-700 |
Input text color for inactive state. |
$input-border-color |
string | $uibase-200 |
Input border color for inactive state. |
$input-border-width |
string | $border-width |
Base input border-width. |
$input-border-radius |
string | $border-radius |
Base input border-radius. |
$input-box-shadow |
string | map-get($shadows, "i1") |
Input inner box shadow for inactive state. |
$input-focus-bg |
string | $input-bg |
Input background color for focus state. |
$input-focus-color |
string | $input-color |
Input text color for focus state. |
$input-focus-border-color |
string | palette($primary, 300) |
Input border color for focus state. |
$input-focus-box-shadow-size |
string | 0 0 0 .1875rem |
Input box shadow dimensions for focus state. |
$input-focus-box-shadow-alpha |
float | .35 |
Input box shadow alpha, opacity, value for focus state. |
$input-focus-box-shadow |
string | $input-focus-box-shadow-size rgba($component-active-bg, $input-focus-box-shadow-alpha) |
Input box shadow for focus state. |
$input-disabled-bg |
string | $uibase-50 |
Input background color for disabled state. |
$input-disabled-color |
string | $component-disabled-color |
Input text color for disabled state. |
$input-disabled-border-color |
string | null |
Border color for disabled state. |
$input-disabled-opacity |
string | 1 |
Opacity value for disabled state. |
$input-placeholder-color |
string | #999 |
Input placheholder text color. |
$input-static-color |
string | $body-color |
Text color for static readonly inputs. |
$form-label-font-weight |
string | $font-weight-normal |
Font weight for .form-label .
|
$form-text-margin-top |
string | .25rem |
Vertical spacing between input and support text. |
$form-group-margin-bottom |
string | 1rem |
Vertical spacing for form group. |
$form-row-gutter-width |
string | .625rem |
Gutter spacing for form row. |
$form-inline-breakpoint |
breakpoint | sm |
Breakpoint where inline froms switch from vertical to horizontal layout. |
$form-inline-check-margin-x |
string | .25rem |
Horizontal spacing for form check when inline. |
$form-check-gutter |
string | 1.25rem |
Reserved spacing width for default inputs within .form-check .
|
$form-check-margin-bottom |
string | .3125rem |
Vertical adjustment for inputs within .form-check .
|
$form-check-label-font-weight |
string | null |
Font weight for `.form-check-label`. |
$form-check-label-disabled-opacity |
string | .6 |
Opacity for `.form-check-label` when the input is disabled. |
$form-checkradio-size |
string | 1em |
Height and width for custom styled checkbox and radio inputs. |
$form-checkradio-gutter |
string | calc(#{$form-checkradio-size} + .375em) |
Reserved spacing width for custom styled checkbox and radio inputs. |
$form-checkradio-bg |
string | $white |
Background color for custom styled checkbox and radio inputs in inactive state. |
$form-checkradio-border-width |
string | $border-width |
Border width for custom styled checkbox and radio inputs |
$form-checkradio-border-color |
string | $input-border-color |
Border color for custom styled checkbox and radio inputs in inactive state. |
$form-checkradio-box-shadow |
string | $input-box-shadow |
Box shadow for custom styled checkbox and radio inputs in inactive state. |
$form-checkradio-icon-size |
string | calc(#{$form-checkradio-size} - .375em) |
Height and width of the background image icon for custom styled checkbox and radio input. |
$form-checkradio-focus-border-color |
string | $input-border-color |
Border color for custom styled checkbox and radio inputs in focused state. |
$form-checkradio-focus-box-shadow |
string | $input-focus-box-shadow |
Box shadow for custom styled checkbox and radio inputs in focused state. |
$form-checkradio-checked-bg |
string | $primary |
Background color for custom styled checkbox and radio inputs in checked state. |
$form-checkradio-checked-color |
string | $white |
Icon color for custom styled checkbox and radio inputs in checked state. |
$form-checkradio-checked-border-color |
string | $primary |
Border color for custom styled checkbox and radio inputs in checked state. |
$form-checkradio-checkbox-border-radius |
string | $border-radius |
Border radius for custom styled checkbox inputs. |
$form-checkradio-checkbox-icon |
string | str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-checkradio-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") |
Icon for custom styled checkbox inputs when in checked state. |
$form-checkradio-radio-border-radius |
string | 50% |
Border radius for custom styled radio inputs. |
$form-checkradio-radio-icon |
string | str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$form-checkradio-checked-color}'/%3e%3c/svg%3e"), "#", "%23") |
Icon for custom styled radio inputs when in checked state. |
$form-checkradio-indeterminate-bg |
string | $primary |
Background color for custom styled checkbox inputs when in indeterminate state. |
$form-checkradio-checkbox-icon |
string | str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$form-checkradio-checked-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") |
Icon for custom styled checkbox inputs when in indeterminate state. |
$form-switch-width |
string | 1.75em |
Width for custom styled switch inputs. |
$form-switch-gutter |
string | calc(#{$form-switch-width} + .375em) |
Reserved spacing width for custom styled checkbox and radio inputs. |
$form-switch-track-height |
string | 1em |
Height for track of custom styled switch inputs. |
$form-switch-track-bg |
string | $white |
Background color for track of custom styled switch inputs in inactive state. |
$form-switch-track-border-width |
string | $input-border-width |
Border width for track of custom styled switch inputs. |
$form-switch-track-border-color |
string | $input-border-color |
Border color for track of custom styled switch inputs in inactive state. |
$form-switch-track-border-radius |
string | $white |
Border radius for track of custom styled switch inputs. |
$form-switch-track-box-shadow |
string | $input-box-shadow |
Box shadow for track of custom styled switch inputs. |
$form-switch-track-focus-bg |
string | null |
Background color for track of custom styled switch inputs in focused state. |
$form-switch-track-focus-border-color |
string | $input-focus-border-color |
Border color for track of custom styled switch inputs in focused state. |
$form-switch-track-focus-box-shadow |
string | $input-focus-box-shadow |
Box shadow for track of custom styled switch inputs in focused state. |
$form-switch-track-checked-bg |
string | $primary |
Background color for track of custom styled switch inputs in checked state. |
$form-switch-track-checked-border-color |
string | $primary |
Border color for track of custom styled switch inputs in checked state. |
$form-switch-thumb-offset |
string | calc(.25em - #{$form-switch-track-border-width}) |
Horizontal offset for thumb of custom styled switch inputs. |
$form-switch-thumb-width |
string | .625em |
Width for thumb of custom styled switch inputs. |
$form-switch-thumb-height |
string | .625em |
Height for thumb of custom styled switch inputs. |
$form-switch-thumb-bg |
string | $uibase-300 |
Background color for thumb of custom styled switch inputs in inactive state. |
$form-switch-thumb-border-width |
string | $border-width |
Border width for thumb of custom styled switch inputs. |
$form-switch-thumb-border-color |
string | $form-switch-thumb-bg |
Border color for thumb of custom styled switch inputs. |
$form-switch-thumb-border-radius |
string | 50% |
Border radius for thumb of custom styled switch inputs. |
$form-switch-thumb-box-shadow |
string | $input-box-shadow |
Box shadow for thumb of custom styled switch inputs. |
$form-switch-thumb-focus-bg |
string | palette($primary, 300) |
Background color for thumb of custom styled switch inputs in focused state. |
$form-switch-thumb-focus-border-color |
string | $form-switch-thumb-focus-bg |
Border color for thumb of custom styled switch inputs in focused state. |
$form-switch-thumb-focus-border-color |
string | $form-switch-thumb-focus-bg |
Border color for thumb of custom styled switch inputs in focused state. |
$form-switch-thumb-focus-box-shadow |
string | $input-focus-box-shadow |
Box shadow for thumb of custom styled switch inputs in focused state. |
$form-switch-thumb-checked-bg |
string | $white |
Background color for thumb of custom styled switch inputs in checked state. |
$form-switch-thumb-checked-border-color |
string | $white |
Border color for thumb of custom styled switch inputs in checked state. |
$form-select-indicator-offset |
string | .375rem |
Additional horizontal spacing of visual indicator for custom select input. |
$form-select-indicator-width |
string | .75em |
Width of visual indicator for custom select input. |
$form-select-indicator-height |
string | .75em |
Height of visual indicator for custom select input. |
$form-select-indicator-color |
string | .rgba($uibase-700, .85) |
Color of visual indicator for custom select input. |
$form-select-indicator-image |
string | str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-select-indicator-color}' d='M3 0l-3 3h6l-3-3zm-3 5l3 3 3-3h-6z'/%3e%3c/svg%3e"), "#", "%23") |
Icon for visual indicator of custom select input. |
$form-select-indicator |
string | $form-select-indicator-image no-repeat right $form-select-indicator-offset center / $form-select-indicator-width $form-select-indicator-height |
Used so we can have multiple background elements (e.g., arrow and feedback icon). |
$form-file-button-color |
string | $uibase-600 |
Button text color for file input. |
$form-file-button-bg |
string | $uibase-50 |
Button background color for file input. |
$form-file-button-disabled-color |
string | $component-disabled-color |
Button text color for file input when in disabled state. |
$form-file-button-disabled-bg |
string | $uibase-50 |
Button background color for file input when in disabled state. |
$form-file-button-disabled-opacity |
string | 1 |
Button opacity for file input when in disabled state. |
$form-range-track-height |
string | .5em |
Height of track for custom range input. |
$form-range-track-cursor |
string | pointer |
Pointer style of track for custom range input. |
$form-range-track-bg |
string | $uibase-100 |
Background color of track for custom range input. |
$form-range-track-border |
string | 0 |
Border style of track for custom range input. |
$form-range-track-border-radius |
string | $form-range-track-height |
Border radius of track for custom range input. |
$form-range-track-box-shadow |
string | map-get($shadows, "i1") |
Box shadow of track for custom range input. |
$form-range-thumb-width |
string | 1.125em |
Width of thumb for custom range input. |
$form-range-thumb-height |
string | $form-range-thumb-width |
Height of thumb for custom range input. |
$form-range-thumb-bg |
string | $primary |
Background color of thumb for custom range input. |
$form-range-thumb-border |
string | 0 |
Border style of thumb for custom range input. |
$form-range-thumb-border-radius |
string | 50% |
Border radius of thumb for custom range input. |
$form-range-thumb-box-shadow |
string | map-get($shadows, "d1") |
Box shadow of thumb for custom range input. |
$form-range-thumb-focus-box-shadow |
string | $input-focus-box-shadow |
Box shadow of thumb for custom range input in focus state. |
$form-range-thumb-focus-box-shadow-width |
string | .1875rem |
Width of box shadow of thumb for custom range input in focus state. |
$form-range-thumb-active-bg |
string | palette($primary, 600) |
Background color of thumb for custom range input in active state. |
$form-range-thumb-disabled-bg |
string | $uibase-300 |
Background color of thumb for custom range input in disabled state. |
$form-range-height |
string | calc(#{$form-range-thumb-height} + (#{$form-range-thumb-focus-box-shadow-width} * 2)) |
Height of custom range input. |
$form-range-min-width |
string | 8rem |
Minimum width of custom range input. Note: Browser default seems to be 129px/~8rem for IE/Chrome/Safari |
$form-feedback-margin-top |
string | $form-text-margin-top |
Vertical spacing between input and feeback text. |
$form-feedback-font-size |
string | $small-font-size |
Font size for feedback text. |
$form-feedback-valid-color |
string | map-get($base-colors, "success") |
Base color for valid feedback state. |
$form-feedback-invalid-color |
string | map-get($base-colors, "danger") |
Base color for invalid feedback state. |
$form-feedback-icon-offset |
string | .25em |
Additional horizontal spacing of visual feedback indicator icon. |
$form-feedback-icon-width |
string | 1em |
Width of visual feedback indicator icon. |
$form-feedback-icon-height |
string | 1em |
Height of visual feedback indicator icon. |
$form-feedback-icon-valid-color |
string | $form-feedback-valid-color |
Icon color for valid feedback state. |
$form-feedback-icon-valid-image |
string | str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") |
Icon for valid feedback state. |
$form-feedback-icon-invalid-color |
string | $form-feedback-invalid-color |
Icon color for invalid feedback state. |
$form-feedback-icon-invalid-image |
string | str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{palette($danger, 500)}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3e"), "#", "%23") |
Icon for invalid feedback state. |
$input-transition |
string | background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out |
Transition effect for inputs. |
$switch-transition |
string | all .15s ease-in-out |
Transition effect for custom switch inputs. |
Mixins
Here are the mixins related to forms that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.
form-validation-state
Build form validation rules.
Argument | Type | Default | Description |
---|---|---|---|
$state |
string | '' |
The value appended to generate the classes for the given validation state. |
$color |
string | none | The color to mix and use throughout the validation state. |
$icon |
string | none | The icon to use throughout the validation state. |
form-control-focus
Add the focus state to a form control or input.
form-range-track()
Add the common, cross-browser rules for track of a range input.
form-range-thumb
Add the common, cross-browser rules for thumb of a range input.