@miraidesigns/textfield v1.0.2

Textfields

Text fields allow for text based inputs.

HTML

<div class="mdf-textfield">
    <label for="textfield" class="mdf-textfield__label">Label</label>
    <input id="textfield" class="mdf-textfield__input" type="text">
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/textfield/styles';

// Configure appearance
@use '@miraidesigns/textfield' with (
    $variable: value
);

@include textfield.styles();

TypeScript

import { MDFTextfield } from '@miraidesigns/textfield';

new MDFTextfield(document.querySelector('.mdf-textfield'));

Examples

Some basic examples on how the module can be used.

Icons

Icons are a great way to add visual information to your input, like a search icon for example.

<!-- Leading icon -->
<div class="mdf-textfield mdf-textfield--icon-leading">
    <label for="textfield" class="mdf-textfield__label">Label</label>
    <input id="textfield" class="mdf-textfield__input" type="text">
    <svg class="mdf-textfield__icon">
        <use href="icons.svg#search"></use>
    </svg>
</div>

<!-- Trailing icon -->
<div class="mdf-textfield mdf-textfield--icon-trailing">
    <label for="textfield" class="mdf-textfield__label">Label</label>
    <input id="textfield" class="mdf-textfield__input" type="text">
    <svg class="mdf-textfield__icon">
        <use href="icons.svg#lock"></use>
    </svg>
</div>

Counters

Display the current character count and character limit.

<div class="mdf-textfield mdf-textfield--has-helper">
    <label for="textfield-counter" class="mdf-textfield__label">Text field</label>
    <input id="textfield-counter" class="mdf-textfield__input" type="text" maxlength="30">
    <div class="mdf-textfield__helper-line">
        <span class="mdf-textfield__helper mdf-textfield__helper--counter"></span>
    </div>
</div>

Textareas

Textareas automatically grow in size to accommodate their content.

<div class="mdf-textfield mdf-textfield--textarea">
    <label for="textarea" class="mdf-textfield__label">Textarea</label>
    <textarea id="textarea" class="mdf-textfield__input" rows="1"></textarea>
</div>

Passwords

Password fields allow to toggle between hidden and plain text.

<div class="mdf-textfield mdf-textfield--has-helper mdf-textfield--icon-trailing">
    <label for="password-field" class="mdf-textfield__label">Password</label>
    <input id="password-field" class="mdf-textfield__input" type="password" minlength="8" maxlength="12" pattern="[a-zA-Z0-9]+">
    <div class="mdf-textfield__helper-line">
        <span class="mdf-textfield__helper"></span>
    </div>

    <button class="mdf-textfield__button mdf-textfield__button--toggle">
        <svg class="mdf-textfield__icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#visibility"></use>
            <use class="mdf-hidden" href="icons.svg#visibility-off"></use>
        </svg>
    </button>
</div>

Implementation

Classes

Properties