Text field

Text field component allows to use forms text fields elements.

Quick demo

Preview of the text field component associated with label and helper text.

Standard

Helper message.

Go on interactive demo for look this component in action!

Usage

Styles

sass

@use "~@iraiser/biscuit-design-components/components/textfield/styles";

JavaScript

javascript

import { BDCTextField } from '@iraiser/biscuit-design-components/components/textfield';

let textField = new BDCTextField(document.querySelector('.bdc-text-field'));

HTML structure

html

<div class="bdc-text-field">
    <input class="bdc-text-field__input">
</div>

Variants

Textarea

Use the text field like a textarea.

html

<div class="bdc-text-field bdc-text-field--textarea">
    <textarea class="bdc-text-field__input"></textarea>
</div>

Leading and trailing icons

The leading and trailing icons can add a new context on text field. You can add leading, trailing or both. This highly recommended to not use icons with textarea option.

To see more information on using icon, go here.

Leading icon

Add on text field the leading icon.

html

<div class="bdc-text-field bdc-text-field--leading-icon">
    <i class="bdc-text-field__icon fa-star fas fa-fw"></i>

    <input class="bdc-text-field__input">
</div>

Trailing icon

Add on text field the trailing icon.

html

<div class="bdc-text-field bdc-text-field--trailing-icon">
    <input class="bdc-text-field__input">

    <i class="bdc-text-field__icon fa-star fas fa-fw"></i>
</div>

Both icons

Add on text field the leading and trailing icons.

html

<div class="bdc-text-field bdc-text-field--leading-icon bdc-text-field--trailing-icon">
    <i class="bdc-text-field__icon fa-star fas fa-fw"></i>

    <input class="bdc-text-field__input">

    <i class="bdc-text-field__icon fa-star fas fa-fw"></i>
</div>

Prefix and suffix text

The prefix and suffix text can add a new context on text field, mostly for currency or mass unit. You can add prefix, suffix or both. You can play with dir="" attribute for sticky the text to affix text. This highly recommended to not use affix text with textarea option.

See the demo with euro sign or email ending.

html

<div class="bdc-text-field">
    <span class="bdc-text-field__affix bdc-text-field__affix--prefix">$</span>

    <input class="bdc-text-field__input">

    <span class="bdc-text-field__affix bdc-text-field__affix--suffix">lbs</span>
</div>

Other variations

Using with label

html

<label class="bdc-label" for="text-field">Text field</label>

<div class="bdc-text-field">
    <input class="bdc-text-field__input" id="text-field">
</div>

For more details, please see Label component.

Using with helper text

html

<div class="bdc-text-field">
    <input class="bdc-text-field__input">
</div>

<div class="bdc-text-field-helper">
    <p class="bdc-text-field-helper-text">Information text</p>
</div>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass

@use "~@iraiser/biscuit-design-components/components/textfield";

.foo-text-field {
    --bdc-theme-surface: #0971b3;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass

@use "~@iraiser/biscuit-design-components/components/textfield";

.foo-text-field {
    @include selected-button.shape-radius(sharped);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS Class	Description
`bdc-text-field`	Mandatory.
`bdc-text-field--focused`	Style text field at focused status.
`bdc-text-field--required`	Style text field at required status.
`bdc-text-field--valid`	Style text field at valid status.
`bdc-text-field--warning`	Style text field at warning status.
`bdc-text-field--invalid`	Style text field at invalid status.
`bdc-text-field--readonly`	Style text field at read only status.
`bdc-text-field--disabled`	Style text field at disabled status.
`bdc-text-field--textarea`	Indicates if the text field is a `<textarea>`.
`bdc-text-field--leading-icon`	Style text field with leading icon.
`bdc-text-field--trailing-icon`	Style text field with trailing icon.
`bdc-text-field__input`	Indicates the native input container.
`bdc-text-field__icon`	Indicates the icon container.
`bdc-text-field__affix`	Indicates the affix container.
`bdc-text-field__affix--prefix`	Indicates the prefix text container.
`bdc-text-field__affix--suffix`	Indicates the suffix text container.
`bdc-text-field-helper`	Indicates the helper container.
`bdc-text-field-helper-text`	Indicates the helper text container.
`bdc-text-field-helper-text--persistent`	Persist the helper text container display.
`bdc-text-field-helper-text--validation-msg`	Indicates the helper text validation message container.

Sass mixins

Custom your own selected button easily with the public Sass mixins.

Mixin	Description
`ink-color($color)`	Set the ink color when text field is enable
`caret-color($color)`	Set the caret color when text field is enable
`shape-radius($radius)`	Set the radius on text field. "normal" (default), "filled", "shaped", "sharped" or custom radius.
`density($scale)`	Set the density on text field. 0 (default), -1 or -2.

JavaScript API

Getters & Setters

Public accessors from BDCTextField class.

Accessor	Type	Description
`value`	`string`	Method for get & set the value.
`valid`	`boolean`	Method for get & set the valid status.
`min`	`number`	Method for get & set the min attribute.
`max`	`number`	Method for get & set the max attribute.
`minlength`	`number`	Method for get & set the minlength attribute.
`maxlength`	`number`	Method for get & set the maxlength attribute.
`required`	`boolean`	Method for get & set the required status.
`readonly`	`boolean`	Method for get & set the readonly status.
`disabled`	`boolean`	Method for get & set the disabled status.
`prefixText`	`string`	Method for get & set the prefix text.
`suffixText`	`string`	Method for get & set the suffix text.
`helperText`	`string`	Method for set the suffix text.

Options

Name	Default	Description
`useNativeValidation`	`true`	Enable or disabled the form validation.
`revealPassword`	`false`	Enable or disabled the reveal password.

Text field

Quick demo

Usage

Styles

JavaScript

HTML structure

Variants

Textarea

Leading and trailing icons

Leading icon

Trailing icon

Both icons

Prefix and suffix text

Other variations

Using with label

Using with helper text

Theming

Theming with CSS custom properties

Theming with Sass mixins

Style customization

CSS classes

Sass mixins

JavaScript API

Getters & Setters

Options

Menu