Text Field Sass API

Variables

text-field-disable-everything

$text-field-disable-everything: base.$form-disable-everything !default;

Set to true to disable the TextField styles

text-field-disable-addon

$text-field-disable-addon: $disable-everything !default;

Set to true if the addon props will not be used with the TextField or TextArea components or the visibilityIcon prop for the Password component.

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-disable-placeholder-ellipsis

$text-field-disable-placeholder-ellipsis: false !default;

Set to true if the ::placeholder text should not automatically ellipsis when there is text overflow.

Used By

• @mixin text-field-text-field-styles

text-field-disable-inline

$text-field-disable-inline: false !default;

Set to true to disable the styles for allowing the TextField to be rendered inline instead of always spanning the full width of the container.

text-field-disable-container-dense

$text-field-disable-container-dense: false !default;

Set to true to disable the TextFieldContainer dense styles.

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-disable-underline-left

$text-field-disable-underline-left: base.$form-disable-underlined-theme !default;

Set to true if the underlined theme will not animate from the left.

NOTE: This would require updating the FORM_CONFIG.underlineDirection value since this is the default.

Used By

• @mixin text-field-container-styles

text-field-disable-underline-center

$text-field-disable-underline-center: base.$form-disable-underlined-theme !default;

Set to true if the underlined theme will not animate from the center.

Used By

• @mixin text-field-container-styles

text-field-disable-underline-right

$text-field-disable-underline-right: base.$form-disable-underlined-theme !default;

Set to true if the underlined theme will not animate from the right.

Used By

• @mixin text-field-container-styles

text-field-typography

$text-field-typography: map.merge(
  typography.$base-font-styles,
  map.merge(
    typography.$body-1-styles,
    (
      font-size: 1em,
    )
  )
) !default;

The default TextField typography

text-field-height

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

The default TextField height.

text-field-dense-height

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

The default TextField height when the dense prop is enabled.

text-field-label-height

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

The default TextField height when there is a label prop.

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-label-dense-height

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

The default TextField height when there is a label and dense prop.

Used By

• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-border-radius

$text-field-border-radius: null !default;

The border-radius for a TextField.

text-field-border-width

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

The border-width for a TextField.

text-field-border-width-active

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

The border-width for a TextField while active or focused.

Used By

• @mixin text-field-container-styles

text-field-filled-padding

$text-field-filled-padding: calc(spacing.get-var(sm) * 1.5) !default;

The amount of horizontal padding to apply to a TextField with the theme="filled".

Used By

• @mixin text-field-variables

text-field-outlined-padding

$text-field-outlined-padding: spacing.get-var(md) !default;

The amount of horizontal padding to apply to a TextField with the theme="outline".

Used By

• @mixin text-field-variables

text-field-outlined-border-radius

$text-field-outlined-border-radius: border-radius.get-var(xs) !default;

The border radius to apply to a TextField with the theme="outline".

Used By

• @mixin text-field-variables

text-field-underlined-padding

$text-field-underlined-padding: null !default;

The amount of horizontal padding to apply to a TextField with the theme="underline".

Used By

• @function text-field-get-var
• @mixin text-field-variables
• @mixin text-field-container-styles

text-field-underlined-placeholder-height

$text-field-underlined-placeholder-height: 2.5rem !default;

The amount of height to apply to a TextField while the theme="underline" and a label has not been provided.

Set this to null to disable these styles.

Used By

• @mixin text-field-container-styles

text-field-underlined-placeholder-padding-top

$text-field-underlined-placeholder-padding-top: spacing.get-var(sm) !default;

The amount of padding-top to apply to a TextField while the theme="underline" and a label has not been provided.

This will be ignored if the $underlined-placeholder-height is null.

Used By

• @mixin text-field-container-styles

text-field-underlined-placeholder-addon-padding-top

$text-field-underlined-placeholder-addon-padding-top: spacing.get-var(xs) !default;

The amount of padding-top to apply to addons in a TextField while the theme="underline".

This will be ignored if the $underlined-placeholder-height is null.

Used By

• @mixin text-field-container-styles

text-field-underlined-label-padding-top

$text-field-underlined-label-padding-top: spacing.get-var(lg) !default;

The amount of padding-top to apply to the TextFieldContainer while the theme="underline" and a label was provided.

NOTE: This is the default height of the label with line-height

Used By

• @mixin text-area-textarea-container-styles
• @mixin text-field-container-styles

text-field-underlined-label-left-offset

$text-field-underlined-label-left-offset: spacing.get-var(sm) !default;

The position in the TextFieldContainer for a Label while the theme="underline".

Used By

• @mixin text-field-container-styles

text-field-color-min-width

$text-field-color-min-width: 5rem !default;

Set this to null if not using <TextField type="color" /> since this is used to apply a min-width to color inputs.

Used By

• @mixin text-field-text-field-styles

text-field-addon-gap

$text-field-addon-gap: spacing.get-var(xs) !default;

The gap to apply between addon elements if multiple were provided. i.e. leftAddon={<><FavoriteIcon /><CloseIcon /></>}

text-field-addon-margin

$text-field-addon-margin: spacing.get-var(sm) !default;

The amount of margin to apply to addons when the TextField theme="underline".

Used By

• @mixin text-field-container-styles

text-field-addon-spacing

$text-field-addon-spacing: spacing.get-var(sm) !default;

The amount of spacing between a TextField addon and the <input> element.

text-field-light-border-color

$text-field-light-border-color: rgba(colors.$black, 0.12) !default;

The border-color for a theme="outline" TextField in the light theme.

Used By

• @mixin text-field-use-light-theme

text-field-dark-border-color

$text-field-dark-border-color: rgba(colors.$white, 0.5) !default;

The border-color for a theme="outline" TextField in the dark theme.

Used By

• @mixin text-field-use-dark-theme

text-field-border-color

$text-field-border-color: theme.get-default-color(
  $light-border-color,
  $dark-border-color
) !default;

The default border-color for a theme="outline" TextField.

text-field-light-hover-border-color

$text-field-light-hover-border-color: rgba(colors.$black, 0.87) !default;

The border-color for a theme="outline" TextField in the light theme while hovering.

Used By

• @mixin text-field-use-light-theme

text-field-dark-hover-border-color

$text-field-dark-hover-border-color: rgba(colors.$white, 0.87) !default;

The border-color for a theme="outline" TextField in the dark theme while hovering.

Used By

• @mixin text-field-use-dark-theme

text-field-hover-border-color

$text-field-hover-border-color: theme.get-default-color(
  $light-hover-border-color,
  $dark-hover-border-color
) !default;

The default border-color for a theme="outline" TextField while hovering.

Used By

• @mixin text-field-variables

text-field-light-filled-background-color

$text-field-light-filled-background-color: colors.$grey-100 !default;

The background color for theme="filled" TextField in the light theme.

Used By

• @mixin text-field-use-light-theme

text-field-dark-filled-background-color

$text-field-dark-filled-background-color: #424242 !default;

The background color for theme="filled" TextField in the dark theme.

Used By

• @mixin text-field-use-dark-theme

text-field-filled-background-color

$text-field-filled-background-color: theme.get-default-color(
  $light-filled-background-color,
  $dark-filled-background-color
) !default;

The default background color for theme="filled" TextField.

Used By

• @mixin text-field-variables

text-field-variables

$text-field-variables: (
  addon-top,
  addon-spacing,
  addon-margin-top,
  addon-left-offset,
  height,
  base-height,
  label-height,
  dense-height,
  dense-label-height,
  padding-left,
  padding-right,
  padding-top,
  border-color,
  border-radius,
  hover-border-color,
  filled-color,
  filled-padding,
  outlined-padding,
  outlined-border-radius,
  underlined-padding
);

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

In 6.4.0, added the following variables: base-height, label-height, dense-height, dense-label-height, border-radius, outlined-border-radius

Mixins

text-field-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

text-field-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

text-field-use-light-theme

@mixin use-light-theme { … }

Applies the light the variables based on feature flags

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $text-field-light-border-color
• $text-field-light-hover-border-color
• $form-disable-filled-theme
• $text-field-light-filled-background-color

text-field-use-dark-theme

@mixin use-dark-theme { … }

Applies the dark the variables based on feature flags

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $text-field-dark-border-color
• $text-field-dark-hover-border-color
• $form-disable-filled-theme
• $text-field-dark-filled-background-color

text-field-variables

@mixin variables { … }

Conditionally applies the css variables based on feature flags

Requires

• @mixin app-bar-set-var
• @function app-bar-get-var
• $app-bar-disable-everything
• $avatar-border-radius
• $form-disable-filled-theme
• $text-field-filled-padding
• $form-disable-outlined-theme
• $text-field-outlined-padding
• $text-field-outlined-border-radius
• $form-disable-underlined-theme
• $text-field-underlined-padding
• $app-bar-height
• $button-disable-floating
• $text-field-label-height
• $text-field-disable-container-dense
• $app-bar-dense-height
• $text-field-label-dense-height
• $avatar-border-color
• $text-field-hover-border-color
• $text-field-filled-background-color
• $text-field-disable-addon
• $autocomplete-addon-spacing

text-field-container-styles

@mixin container-styles($disable-layer: false) { … }

Generates all the styles based on feature flags.

Used By

• @mixin text-field-styles

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• @function theme-get-var
• $button-disable-floating
• $text-field-disable-container-dense
• $app-bar-dense-height
• $text-field-label-dense-height
• $form-message-disable-inline
• $text-field-label-height
• $text-field-disable-addon
• $form-disable-underlined-theme
• $form-disable-outlined-theme
• $label-floating-padding
• $card-border-width
• $avatar-color
• $interaction-disable-outline-offset
• $form-disable-filled-theme
• $text-field-underlined-padding
• $text-field-border-width-active
• $linear-duration
• $linear-timing-function
• $text-field-underlined-placeholder-height
• $text-field-underlined-placeholder-addon-padding-top
• $text-field-underlined-placeholder-padding-top
• $text-field-underlined-label-padding-top
• $text-field-addon-margin
• $text-field-disable-underline-left
• $text-field-disable-underline-center
• $text-field-disable-underline-right
• $text-field-underlined-label-left-offset

text-field-text-field-styles

@mixin text-field-styles($disable-layer: false) { … }

Generates all the styles based on feature flags.

Used By

• @mixin text-field-styles

Requires

• @mixin responsive-item-base-styles
• @mixin app-bar-use-var
• $text-field-color-min-width
• $text-field-disable-placeholder-ellipsis
• $linear-duration

text-field-addon-styles

@mixin addon-styles($disable-layer: false) { … }

Generates all the styles based on feature flags.

Used By

• @mixin text-field-styles

Requires

• @mixin app-bar-use-var
• $autocomplete-addon-gap
• $form-disable-filled-theme
• $form-disable-underlined-theme

text-field-styles

@mixin styles($disable-layer: false) { … }

Generates all the styles based on feature flags.

Requires

• @mixin text-field-container-styles
• @mixin text-field-text-field-styles
• @mixin text-field-addon-styles
• $app-bar-disable-everything

Functions

text-field-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

a var() statement

Requires

• @function get-var-name
• $text-field-underlined-padding
• @mixin app-bar-variables