Text fields

Example

cancel

person

<mc-textfield label="Label">
  <mc-icon slot="leading-icon">search</mc-icon>
  <mc-icon slot="trailing-icon">cancel</mc-icon>
</mc-textfield>

<mc-textfield label="Label" prefix-text="$" suffix-text="@gmail.com"></mc-textfield>

<mc-textfield label="Label" outlined value="My name" disabled>
  <mc-icon slot="trailing-icon">person</mc-icon>
</mc-textfield>

<!-- No indicator (underline) -->
<mc-textfield label="No indicator" no-indicator></mc-textfield>

<mc-textfield label="Shape" no-indicator style="--mc-textfield-shape: var(--mc-shape-extra-large)">
  <mc-icon slot="leading-icon">search</mc-icon>
</mc-textfield>

<mc-textfield label="Condensed" condensed></mc-textfield>

Types

There are two types of text fields: Filled and Outlined

<mc-textfield
  label="Label"
  ></mc-textfield>
  
<mc-textfield
  label="Label"
  outlined
  ></mc-textfield>

Icons (leading, trailing)

person

<mc-textfield label="Label">
  <mc-icon slot="leading-icon">search</mc-icon>
  <mc-icon slot="trailing-icon">person</mc-icon>
</mc-textfield>

Supporting and error text

<mc-textfield
  label="Supporting text"
  supporting-text="Supporting text"
  ></mc-textfield>

<mc-textfield
  label="Required"
  required
  ></mc-textfield>

<mc-textfield
  label="Number min max"
  type="number"
  min="1"
  max="9"
  ></mc-textfield>

<mc-textfield
  label="Custom error"
  required
  error-text="Required* (custom)"
  ></mc-textfield>

<mc-textfield 
  label="With supporting text"
  required
  supporting-text="Supporting text"
  ></mc-textfield>

Suggestion

<mc-textfield
  label="Suggestion"
  placeholder="Type suggestion"
  suggestion="suggestion"
  ></mc-textfield>

Formatting and masking

Use string replacers with pattern regular expressions to format input

format attribute takes a string replacer. Currently only the number group selector works ($1, $2, ...). The formatter works off the input pattern regex. You can use groups to split value into parts.

pattern-restrict attribute will prevent incorrect characters or input length

mask attribute takes a string replacer. Currently only the number group selector works ($1, $2, ...). The mask requires a format to be set

Note if escaping(backslash) in pattern attribute you need to double escape (\s -> \\s)

<!-- Social Security Number -->
<!-- converts (123121234, 123-12-1234, 123 12 1234) into 123-12-1234 -->
<mc-textfield
  id="ssn"
  label="SSN"
  format="$1-$2-$3"
  pattern-restrict
  pattern="^([0-9]{3})[\\-\\s]?([0-9]{2})[\\-\\s]?([0-9]{4})$"
  ></mc-textfield>

<!-- Social Security Number with mask -->
<mc-textfield
  id="ssnmask"
  label="SSN masked"
  format="$1-$2-$3"
  mask="xxx-xx-$3"
  pattern-restrict
  pattern="^([0-9]{3})[\\-\\s]?([0-9]{2})[\\-\\s]?([0-9]{4})$"
  ></mc-textfield>

<!-- US Phone -->
<!-- converts (1231231234, 123 123 1234, 123-123-1234, (123) 123 1234, 123.123.1234) into (123) 123 1234 -->
<!-- NOTE if escaping(backslash) in pattern attribute you need to double escape (s -> \s) -->
<mc-textfield
  id="phone"
  label="Phone"
  format="($1) $2 $3"
  pattern-restrict
  pattern="^\\(?([0-9]{3})(?:[\\)\\.\\-\\s]+)?([0-9]{3})[\\.\\-\\s]?([0-9]{4})$"
  ></mc-textfield>

const inputSSN = document.querySelector('input#ssn');
console.log(inputSSN.value); // the typed input 123121234
console.log(inputSSN.formattedValue); // the formatted input 123-12-1234

const inputSSNMasked = document.querySelector('input#ssnmasked');
console.log(inputSSN.value); // the typed input 123121234
console.log(inputSSN.formattedValue); // the formatted input 123-12-1234
console.log(inputSSN.maskedValue); // the masked input xxx-xx-1234

const inputPhone = document.querySelector('input#ssn');
console.log(inputPhone.value); // the typed input 1231231234
console.log(inputPhone.formattedValue); // the formatted input (123) 123 1234

Character count

<mc-textfield label="No max" character-count></mc-textfield>
<mc-textfield label="With max" character-count maxlength="10" supporting-text="supporting test"></mc-textfield>

Textarea

<mc-textfield label="Textarea" type="textarea" character-count maxlength="255"></mc-textfield>
<mc-textfield label="Min / max height" type="textarea" style="min-height: 80px; max-height: 120px;"></mc-textfield>
<mc-textfield label="Rows 3" type="textarea" rows="3"></mc-textfield>

Style

CSS variables that allow you override default values

/* Optional variables for overriding */

--mc-textfield-shape: ar(--mc-shape-extra-small-top);
--mc-textfield-container-color: var(--mc-surface-container-highest);
--mc-textfield-input-text-color: var(--mc-on-surface);
--mc-textfield-label-text-color: var(--mc-on-surface-variant);
--mc-textfield-active-indicator-color: var(--mc-primary);