Text fields

Example

cancel

person

<mc-switch>Label</mc-switch>
<mc-switch checked>Label</mc-switch>

Types

There are two types of text fields: Filled and Outlined

<mc-textfield label=Label></mc-textfield>
  
<mc-textfield class=outlined label=Label></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" max=9 min=1 type=number></mc-textfield>

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

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

Suggestion

<mc-textfield placeholder="Type suggestion" label=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)



<mc-textfield pattern=^([0-9]{3})[\\-\\s]?([0-9]{2})[\\-\\s]?([0-9]{4})$ format=$1-$2-$3 id=ssn label=SSN pattern-restrict></mc-textfield>


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




<mc-textfield format="($1) $2 $3" pattern=^\\(?([0-9]{3})(?:[\\)\\.\\-\\s]+)?([0-9]{3})[\\.\\-\\s]?([0-9]{4})$ id=phone label=Phone pattern-restrict></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" supporting-text="supporting test" character-count maxlength=10></mc-textfield>

Textarea

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