Skip to main content
react-md
Form - SassDoc

#Variables

#rmd-form-error-color

Color

The color to use when a form contains an error.

$rmd-form-error-color: $rmd-theme-error !default;
Requires

#rmd-form-error-hover-color

Color

This is the color that is used when a text field/textarea is errored and the user hovers over it.

$rmd-form-error-hover-color: rmd-theme-get-swatch(
  $rmd-form-error-color,
  700,
  true,
  darken($rmd-form-error-color, 10%),
  rmd-form-error-color
) !default;
Requires

#rmd-form-active-color

Color

The color to use when a form element (text, checkbox, radio, etc) is currently active by the user(normally focus).

$rmd-form-active-color: rmd-theme-var(secondary) !default;
Requires

#rmd-form-disabled-color

Color

The color to use when a form element is disabled.

$rmd-form-disabled-color: rmd-theme-var(text-disabled-on-background) !default;
Requires

#rmd-form-placeholder-color

Color

The default color to use for placeholder text within text fields.

$rmd-form-placeholder-color: rmd-theme-var(
  text-secondary-on-background
) !default;
Requires

#rmd-form-theme-values

Map

A Map of all the "themeable" parts of the form package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-form-theme-values: (
  error-color: $rmd-form-error-color,
  error-hover-color: $rmd-form-error-hover-color,
  active-color: $rmd-form-active-color,
  disabled-color: $rmd-form-disabled-color,
  toggle-inset: $rmd-toggle-inset,
  toggle-dense-inset: $rmd-toggle-dense-inset,
  indeterminate-height: $rmd-checkbox-indeterminate-height,
  indeterminate-dense-height: $rmd-checkbox-indeterminate-dense-height,
  track-background-color: $rmd-switch-track-background-color,
  floating-top: $rmd-label-floating-top,
  floating-dense-top: $rmd-label-floating-dense-top,
  addon-top: auto,
  addon-margin-top: 0px,
  label-left-offset: 0px,
  label-top-offset: 0px,
  label-active-padding: 0px,
  label-active-background-color: transparent,
  text-padding-left: 0px,
  text-padding-right: 0px,
  text-padding-top: 0px,
  text-offset: 0px,
  text-active-color: $rmd-text-field-active-color,
  text-border-color: $rmd-text-field-border-color,
  text-border-hover-color: $rmd-text-field-border-hover-color,
  text-filled-color: $rmd-text-field-filled-background-color,
  text-height: $rmd-text-field-height,
  text-label-height: $rmd-text-field-label-height,
  text-label-dense-height: $rmd-text-field-label-dense-height,
  text-placeholder-height: $rmd-text-field-height,
  text-placeholder-dense-height: $rmd-text-field-dense-height,
  textarea-padding: $rmd-textarea-vertical-padding,
) !default;
Used By

#rmd-label-font-size

Number

The font size to use for a <label> by default.

$rmd-label-font-size: 1em !default;
Used By

#rmd-label-floating-font-size

Number

The font size to use for a floating label that is currently fixed above a text field/textarea.

$rmd-label-floating-font-size: 0.75em !default;
Used By

#rmd-label-floating-padding

Number

The amount of horizontal padding to use for a floating label use with an outlined text field/textarea.

$rmd-label-floating-padding: 0.25rem !default;
Used By

#rmd-label-floating-top

Number

The top position for a floating label.

$rmd-label-floating-top: 1rem !default;

#rmd-label-floating-dense-top

Number

The top position for a dense floating label.

$rmd-label-floating-dense-top: 0.9rem !default;

#rmd-label-padding

Number

The amount of horizontal padding to use for a floating label with an outlined text field/textarea.

$rmd-label-padding: 0.25rem !default;

#rmd-select-native-multiple-padding

Number

The additional amount of apdding to apply to the top of the select field container in addition to normal text field padding. This is used so the floating label does not cover the scrollable content.

$rmd-select-native-multiple-padding: 0.75rem !default;
Used By

#rmd-select-native-addon-top

Number

The default position for a text-field addon when the native select is a multi-select. If this isn't set, the addon will always be centered based on the size of the select field instead.

$rmd-select-native-addon-top: 1rem !default;
Used By

#rmd-listbox-z-index

Number

The z-index to use for a temporary listbox.

$rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;
Used By
Requires

#rmd-listbox-elevation

Number

The elevation level for a temporary listbox. This should be a number between 0-24 as it generates a material design box shadow value.

$rmd-listbox-elevation: 8 !default;
Used By

#rmd-option-focused-styles

Map

The styles to apply when an option is focused with aria-activedescendant behavior. This should be a map of styles that should be applied.

$rmd-option-focused-styles: (
  box-shadow: inset 0 0 0 2px $rmd-blue-500,
) !default;
Used By
Requires

#rmd-option-selected-styles

Map

The styles to apply when an option is selected. This should be a map of style properties with values to apply.

$rmd-option-selected-styles: (
  background-color: $rmd-blue-900,
  color: $rmd-white-base,
) !default;
Used By
Requires

#rmd-option-selected-offset

Number

The amount of left (or right when rtl languages are used) to apply to the option's selected checkmark css.

$rmd-option-selected-offset: 0.5rem !default;
Used By

#rmd-option-selected-content

String

The content to use for the selected state of the option. If this value is set to null, the ::after styles will not be created and the $rmd-option-horizontal-padding variable will not be used to update the list item's horizontal padding for options. This is useful if you want to use icons or ignore the selected state instead.

$rmd-option-selected-content: '\2713' !default;
Used By

#rmd-option-horizontal-padding

Number

The amount of horizontal padding that should be applied to each option. This overrides the $rmd-list-item-horizontal-padding css variable so that the selected checkmark styles can appear nicely.

$rmd-option-horizontal-padding: 1.5rem !default;
See also

#rmd-text-field-active-color

Color

The color to use for the text field's borders/underlines while the user is focusing the text field.

$rmd-text-field-active-color: $rmd-states-focus-shadow-color !default;
Requires

#rmd-text-field-light-border-color

Color

The text field's border color to use in light themed apps or backgrounds.

$rmd-text-field-light-border-color: rgba($rmd-black-base, 0.12) !default;
Used By
Requires

#rmd-text-field-dark-border-color

Color

The text field's border color to use in dark themed apps or backgrounds.

$rmd-text-field-dark-border-color: rgba($rmd-white-base, 0.5) !default;
Used By
Requires

#rmd-text-field-border-color

Color

The default text field's border color to use.

$rmd-text-field-border-color: if(
  $rmd-theme-light,
  $rmd-text-field-light-border-color,
  $rmd-text-field-dark-border-color
) !default;
Requires

#rmd-text-field-light-border-hover-color

Color

The text field's border color to use in light themed apps or backgrounds when the user is hovering the text field.

$rmd-text-field-light-border-hover-color: rgba($rmd-black-base, 0.87) !default;
Used By
Requires

#rmd-text-field-dark-border-hover-color

Color

The text field's border color to use in dark themed apps or backgrounds when the user is hovering the text field.

$rmd-text-field-dark-border-hover-color: rgba($rmd-white-base, 0.87) !default;
Used By
Requires

#rmd-text-field-border-hover-color

Color

The default text field's hover border color to use.

$rmd-text-field-border-hover-color: if(
  $rmd-theme-light,
  $rmd-text-field-light-border-hover-color,
  $rmd-text-field-dark-border-hover-color
) !default;
Requires

#rmd-text-field-border-radius

Number

The border radius to apply to text fields.

$rmd-text-field-border-radius: 0.25rem !default;
Used By

#rmd-text-field-border-width

Number

The default border width for outlined text fields.

$rmd-text-field-border-width: 1px !default;
Used By

#rmd-text-field-border-width-active

Number

The border width for outlined text fields that are currently focused.

$rmd-text-field-border-width-active: 2px !default;
Used By

#rmd-text-field-label-height

Number

The height to use for a text field with a label.

$rmd-text-field-label-height: 3.5rem !default;

#rmd-text-field-label-dense-height

Number

The height to use for a text field with a label with the dense spec.

$rmd-text-field-label-dense-height: 3.25rem !default;

#rmd-text-field-height

Number

The height to use for a text field without a label (so placeholder only).

$rmd-text-field-height: 3rem !default;

#rmd-text-field-dense-height

Number

The height to use for a text field without a label with the dense spec (so placeholder only).

$rmd-text-field-dense-height: 2.5rem !default;

#rmd-text-field-outline-padding

Number

The amount of padding to apply to the left and right of the text field when it has the outline theme applied.

$rmd-text-field-outline-padding: 1rem !default;
Used By

#rmd-text-field-underline-label-padding-top

Number

The amount of padding to apply to the top of an underlined or filled text field. This is used to push the input down a little bit to look nice with the floating label.

$rmd-text-field-underline-label-padding-top: 1rem !default;
Used By

#rmd-text-field-underline-label-left-offset

Number

The amount of offset to apply to the floating label for an underlined or filled text field when there is an icon to the left of the input.

$rmd-text-field-underline-label-left-offset: $rmd-icon-spacing-with-text !default;
Used By
Requires

#rmd-text-field-underline-dense-padding-top

Number

The amount of padding to apply to the top of an underlined or filled text field when the dense theme is enabled. This is used to push the input down a little bit to look nice with the floating label.

$rmd-text-field-underline-dense-padding-top: 0.25rem !default;
Used By

#rmd-text-field-underline-padding

Number

The amount of padding to apply to the left and right of the text field when it has the underline theme applied.

$rmd-text-field-underline-padding: null !default;
Used By

#rmd-text-field-filled-padding

Number

The amount of padding to apply to the left and right of the text field when it has the filled theme applied.

$rmd-text-field-filled-padding: 0.75rem !default;
Used By

#rmd-text-field-filled-light-background-color

Color

The background color to use for filled text fields when using the light theme.

$rmd-text-field-filled-light-background-color: $rmd-grey-100 !default;
Used By
Requires

#rmd-text-field-filled-dark-background-color

Color

The background color to use for filled text fields when using the dark theme.

$rmd-text-field-filled-dark-background-color: $rmd-grey-700 !default;
Used By
Requires

#rmd-text-field-filled-background-color

Color

The default background color for filled text fields.

$rmd-text-field-filled-background-color: if(
  $rmd-theme-light,
  $rmd-text-field-filled-light-background-color,
  $rmd-text-field-filled-dark-background-color
) !default;
Requires

#rmd-text-field-filled-border-radius

Number

The border radius to apply to the top left and top right of the filled text field.

$rmd-text-field-filled-border-radius: 0.25rem !default;
Used By

#rmd-text-field-addon-margin

Number

The amount of spacing between the left or right of the text field and the icon.

$rmd-text-field-addon-margin: $rmd-icon-spacing-with-text !default;
Used By
Requires

#rmd-textarea-vertical-padding

Number

An additional amount of padding to apply to textareas.

$rmd-textarea-vertical-padding: 0.5rem !default;

#rmd-textarea-addon-top

Number

The amount to start offseting the textarea's left/right inline addon icons. If this value isn't set, the icons will be centered in the textarea's height and will continually be centered as the user types more and more text.

$rmd-textarea-addon-top: 1rem !default;
Used By

#rmd-form-message-min-height

Number

The minimum height for the FormMessage component. This is really just required to help prevent layout changes when the messages are added and removed from the DOM.

$rmd-form-message-min-height: 2rem !default;
Used By

#rmd-form-message-margin-top

Number

The amount of margin that should be applied to the top of the FormMessage component.

$rmd-form-message-margin-top: 0.5rem !default;
Used By

#rmd-form-message-margin-bottom

Number

The amount of margin that should be applied to the top of the FormMessage component.

$rmd-form-message-margin-bottom: 1rem !default;
Used By

#rmd-form-message-counter-spacing

Number

The amount of padding to apply to the left of the FormMessage's counter component.

$rmd-form-message-counter-spacing: $rmd-icon-spacing-with-text !default;
Used By
Requires

#rmd-form-message-font-size

Number

The font size to apply to the FormMessage component for the messages as well as the counter component.

Note: The remaining typography styles will come from body-2.

$rmd-form-message-font-size: 0.75rem !default;
Used By

#rmd-toggle-border-radius

Number

The border radius for the checkbox and radio components.

$rmd-toggle-border-radius: 50% !default;
Used By

#rmd-toggle-inset

Number

This is how much the background layer should be inset relative to the checkbox/radio's icon element. This is used to animate changes in the checked state by covering part of the icon.

$rmd-toggle-inset: 0.3125rem !default;

#rmd-toggle-dense-inset

Number

The amount of offset to apply when using the dense theme.

$rmd-toggle-dense-inset: 0.25rem !default;
See also

#rmd-toggle-inactive-color

Since v2.2.0

Color|String

The color to use for the checkbox and radio components while unchecked. If you want to be able to dynamically configure the active color, you can set this to a custom css variable string.

$rmd-toggle-inactive-color: rmd-theme-var(
  text-secondary-on-background
) !default;

Examples

As a Custom CSS Variable
$rmd-toggle-inactive-color: --toggle-inactive;
$rmd-toggle-active-color: --toggle-active;

:root {
  --toggle-active: #{rmd-theme-var(secondary)};
  --toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};
}

.overriding {
  --toggle-active: #{$rmd-orange-700};
  --toggle-inactive: #{$rmd-orange-a-100};
}
Used By
Requires

#rmd-toggle-active-color

Since v2.2.0

Color|String

The color to use for the checkbox and radio components while checked. If you want to be able to dynamically configure the active color, you can set this to a custom css variable string.

$rmd-toggle-active-color: rmd-theme-var(secondary) !default;

Examples

As a Custom CSS Variable
$rmd-toggle-inactive-color: --toggle-inactive;
$rmd-toggle-active-color: --toggle-active;

:root {
  --toggle-active: #{rmd-theme-var(secondary)};
  --toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};
}

.overriding {
  --toggle-active: #{$rmd-orange-700};
  --toggle-inactive: #{$rmd-orange-a-100};
}
Used By
Requires

#rmd-checkbox-indeterminate-height

Number

The height for the indeterminate checkbox's state line that covers the icon.

$rmd-checkbox-indeterminate-height: 0.15rem !default;

#rmd-checkbox-indeterminate-dense-height

Number

The height for the indeterminate checkbox's state line that covers the icon when the dense spec is enabled.

$rmd-checkbox-indeterminate-dense-height: 0.125rem !default;

#rmd-switch-track-height

Number

The height for a switch's track. The track is the background that the ball animates left and right on.

$rmd-switch-track-height: 1rem !default;
Used By

#rmd-switch-track-width

Number

The width for a switch's track. The track is the background that the ball animates left and right on.

$rmd-switch-track-width: 2.25rem !default;
Used By

#rmd-switch-track-background-color

Color

The background color for a switch's track. This is the element that the ball animates left and right on.

$rmd-switch-track-background-color: if(
  $rmd-theme-dark-elevation,
  map-get($rmd-theme-dark-elevation-colors, 24),
  rgba($rmd-black-base, 0.38)
) !default;
Requires

#rmd-switch-track-border-radius

Number

The border radius to apply to the switch's track. This is the element that the ball animates left and right on.

$rmd-switch-track-border-radius: 0.5rem !default;
Used By

#rmd-switch-ball-size

Number

The size of the switch's ball.

$rmd-switch-ball-size: 1.25rem !default;
Used By

#rmd-switch-ball-border-radius

Number

The border radius for the switch's ball.

$rmd-switch-ball-border-radius: 50% !default;
Used By

#rmd-switch-ball-offset

Number

The amount of offset that should be applied to the ball relative to its track. This is really used so the ball can overlap the track a bit to look a bit nicer.

$rmd-switch-ball-offset: 0.25rem !default;
Used By

#rmd-switch-container-vertical-padding

Number

The vertical padding for the switch container. This should generally be large enough so that the ball does not overlap any other elements.

$rmd-switch-container-vertical-padding: 0.5rem !default;
Used By

#rmd-switch-container-horizontal-padding

Number

The horizontal padding for the switch container. This should generally be large enough so that the ball does not overlap the label or other elements.

$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size / 2 !default;
Used By

#rmd-switch-ball-disabled-color

Color

The color to use for the switch's ball when it is toggled on and disabled.

$rmd-switch-ball-disabled-color: rmd-theme-get-swatch(
  $rmd-theme-secondary,
  200,
  false,
  darken($rmd-theme-secondary, 5%),
  rmd-switch-ball-disabled-color
) !default;
Used By
Requires

#rmd-switch-progress-width

Number

The width of the circular progress bar. This will make the progress bar more prominent than the normal circular progress.

$rmd-switch-progress-width: 12 !default;
Used By

#rmd-switch-progress-background-color

Color

The background color to use for the switch's ball while the the switch is loading.

$rmd-switch-progress-background-color: $rmd-white-base !default;
Used By
Requires

#rmd-switch-progress-padding

Number

The amount of padding to apply to the async switch's progress bar. This will make it so there is some space between the switch's ball and the progress bar.

$rmd-switch-progress-padding: 0.125rem !default;
Used By

#Mixins

#rmd-form-theme

mixin

Creates the styles for one of the form's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-form-theme-values value to.

String
$theme-style

One of the keys of rmd-form-theme-values to extract a value from.

String
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-form-theme-values map when null.

Color|String|Numbernull
Used By
Requires

#rmd-form-theme-update-var

mixin

Updates one of the form's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The form theme style type to update. This should be one of the $rmd-form-theme-values keys.

String
$value

The new value to use.

Color|String|Number
Used By
Requires

#rmd-fieldset

mixin

Creates the base styles for a simple fieldset element.

Used By
Requires

#react-md-form

mixin

Creates the styles for forms within react-md. This requires either the rmd-form-use-font-forms or rmd-form-use-svg-forms variables to be enabled to generate any styles.

Used By
Requires

#react-md-file-input

mixin
Used By
Requires

#rmd-label

mixin

Creates the base styles for a <label> element as well as all the different states a label can be in.

Used By
Requires

#rmd-floating-label

mixin
Used By
Requires

#react-md-label

mixin
Used By
Requires

#rmd-native-select-container

mixin
Used By
Requires

#rmd-native-select

mixin
Used By
Requires

#rmd-select

mixin
Used By
Requires

#rmd-listbox

mixin
Used By
Requires

#rmd-option

mixin
Used By
Requires

#react-md-select

mixin
Used By
Requires

#rmd-text-field-container

mixin
Used By
Requires

#rmd-text-field-placeholder

mixin

A simple mixin that applies placeholder styles to an input/textarea element.

#rmd-text-field-base

mixin

Creates the base styles for a text field so that it gains the correct typography and a few different colors based on its state.

Used By
Requires

#rmd-text-field

mixin
Used By
Requires

#rmd-text-field-addon

mixin
Used By
Requires

#rmd-textarea-container

mixin
Used By
Requires

#rmd-textarea

mixin
Used By
Requires

#rmd-password

mixin
Used By
Requires

#rmd-form-message

mixin
Used By
Requires

#react-md-text-field

mixin
Used By
Requires

#rmd-toggle-container

mixin

Creates the minimal styles for a toggle container.

Used By

#rmd-toggle

mixin

Creates all the styles for creating the icon container for the checkbox and radio input types.

Used By
Requires

#rmd-input-hidden

mixin

Creates styles to apply to the "hidden" input for checkboxes and radios.

Used By
Requires

#rmd-toggle-hidden

mixin

Creates the styles for a form input that should be hidden from view. This should normally be applied to checkbox or radio input types.

Used By
Requires

#rmd-toggle-icon

mixin

Creates the styles for the checkbox and radio input types' icon

Used By
Requires

#rmd-toggle-dense-theme

mixin

Updates the checkbox and radio components to have a dense theme by updating the toggle-inset css variable to be the dense version. This should generally be used within media queries.

Used By
Requires

#rmd-switch

mixin

Creates the styles for the switch component

Used By
Requires

#rmd-switch-input

mixin
Used By
Requires

#rmd-switch-ball

mixin
Used By
Requires

#rmd-switch-container

mixin
Used By
Requires

#react-md-toggle

mixin

Creates all the styles for the toggle components in the form package.

Used By
Requires

#Functions

#rmd-form-theme

function

This function is used to quickly get one of the form's theme values. This is really just for the rmd-form-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the form's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-form-theme-values map keys to get a value for.

String
Requires

#rmd-form-theme-var

function

This function is used to get one of the form's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-form-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — Color|String|Number

one of the form's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-form-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull
Used By
Requires