@miraidesigns/textfield

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

Name	Type	Description
mdf-textfield	Parent	Contains the input elements
mdf-textfield--condensed	Modifier	Reduce the input's height
mdf-textfield--stretch	Modifier	Stretches the input to the width of its parent
mdf-textfield--disabled	Modifier	Greys out the input, stops all interaction with the element
mdf-textfield--state-success	Modifier	Used in input validation, changes input colors to green
mdf-textfield--state-warning	Modifier	Used in input validation, changes input colors to yellow
mdf-textfield--state-error	Modifier	Used in input validation, changes input colors to red
mdf-textfield--textarea	Modifier	For textarea elements
mdf-textfield--number	Modifier	For number input elements
mdf-textfield--has-helper	Modifier	Prepare the input for helper text (also used for error messages)
mdf-textfield--icon-leading	Modifier	Prepare the input for a leading icon
mdf-textfield--icon-trailing	Modifier	Prepare the input for a trailing icon
mdf-textfield__label	Child	Label element, child to .mdf-textfield
mdf-textfield__label--floating	Modifier	Moves the label above the input
mdf-textfield__label--focus	Modifier	Focus styles for the label
mdf-textfield__label--shake	Modifier	Play the shake animation
mdf-textfield__input	Child	Input element. Child to .mdf-textfield
mdf-textfield__icon	Child	Icon element. Child to .mdf-textfield
mdf-textfield__button	Child	Button element. Child to .mdf-textfield
mdf-textfield__helper-line	Parent / Child	Contains the helper text and text counter. Child to .mdf-textfield
mdf-textfield__helper	Child	Helper text, used to display useful information and errors. Child to .mdf-textfield__helper-line
mdf-textfield__helper--counter	Modifier	Used for the character counter

Properties

Name	Type	Description
.counter	HTMLElement	Returns the counter element
.helper	HTMLElement	Returns the helper element
.input	HTMLInputElement	Returns the input element
.label	HTMLElement	Returns the label element
.leadingIcon	HTMLElement	Returns the leading icon element
.toggle	HTMLElement	Returns the password toggle element
.trailingIcon	HTMLElement	Returns the trailing icon element
.type	string	Get or set the input's type
.value	string	Get or set the input's value
.length	number	Get the value's current length
.minLength	number	Get or set the input's minLength
.maxLength	number	Get or set the input's maxLength
.min	string	Get or set the input's min
.max	string	Get or set the input's max
.step	string	Get or set the input's step
.pattern	string	Get or set the input's pattern
.required	boolean	Get or set the input's required state
.disabled	boolean	Get or set the input's disabled state
.prefix	string	Get or set the prefix text
.suffix	string	Get or set the suffix text
.message	string	Get or set the helper message
.validate	boolean	Get or set if the input should use validation (defaults to true)
.state	string	Get the current input state
.setState(state)	(string): void	Set the current input state. Valid value are Success Warning Error
.clearState()	(): void	Clear the current input state
.setError(error)	(string): void	Set Error state and display the given error message
.clearError()	(): void	Clear input state and remove message
.floatLabel(float)	(boolean): void	Float the label or restore the default position
.focusLabel(focus)	(boolean): void	Focus the label or remove focus from it
.shakeLabel()	(): void	Shake the label to indicate an invalid input