Skip to content

Latest commit

 

History

History
345 lines (242 loc) · 7.41 KB

input.en.md

File metadata and controls

345 lines (242 loc) · 7.41 KB
Raw

input

Use this block for creating different types of text fields.

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
type 'password', 'search' BEMJSON The type of the text field.
width 'available' BEMJSON The maximum allowed width of the text field.
has-clear true BEMJSON The element that clears the input field content.
disabled true BEMJSON, JS The disabled state.
focused true BEMJSON, JS The block is in focus.
theme 'islands' BEMJSON A custom design.
size 's', 'm', 'l', 'xl' BEMJSON The size of the text field. Use sizes only for text fields when the theme modifier is set to islands.

Custom fields of the block

Field Type Description
name String The unique block name.
val String, Number Default content of the text field.
placeholder String The hint in the text field.
maxLength String The maximum number of characters allowed in the text field.
autocomplete Boolean Browser predictions of the rest of a word while a user is typing.
id String The unique identifier of the text field.
tabIndex Number The order when navigating through controls on a page by pressing the Tab key.

Block description

Use the input block to control the size, state and appearance of the text fields.

Modifiers of the block

type modifier

Acceptable values:'password', 'search'.

Use case: BEMJSON.

This modifier changes types of the text fields.

If the type modifier is not set, the input block is a common text field by default.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Enter your name'
}
Password field (type modifier with password value)

Use to create the specialized text fields for a password entry. For security reasons, the password field does not show the characters that the user types. Instead, the field displays the character different from the one typed such as an asterisk '*' (depends on a browser).

{
    block : 'input',
    mods : { theme : 'islands', size: 'm', type : 'password' },
    placeholder : 'Enter the password'
}
Search field (type modifier with search value)

Use to create the search field.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', type : 'search' },
    placeholder : 'Enter your question'
}

width modifier

Acceptable value:'available'.

Use cases: BEMJSON.

Use to set the maximum available width to the text field.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', width : 'available' },
    placeholder : 'Enter your name'
}

has-clear modifier

Acceptable value:true.

Use cases: BEMJSON.

Use this modifier to add the clear element into the text field to remove entered content.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', 'has-clear' : true },
    val : 'Hello!'
}

disabled modifier

Acceptable value:true.

Use cases: BEMJSON, JS.

The modifier makes the block inactive. The disabled block is visible but not available for user actions.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', disabled : true },
    placeholder : 'Enter your name'
}

focused modifier

Acceptable value:true.

Use cases: BEMJSON, JS.

The modifier puts the focus on the block.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', focused : true },
    placeholder : 'Enter your name'
}

theme modifier

Acceptable value:'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier.

{
    block : 'input',
    mods : { theme : 'islands', size: 'm', type : 'search' },
    placeholder : 'Enter your question'
}

size modifier

Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.

Use case: BEMJSON.

Use the size modifier only for blocks with the islands theme.

Sets the size value for all types of text fields.

s

{
    block : 'input',
    mods : { theme : 'islands', size: 's' },
    placeholder : 'Size s'
}

m

{
    block : 'input',
    mods : { theme : 'islands', size: 'm' },
    placeholder : 'Size m'
}

l

{
    block : 'input',
    mods : { theme : 'islands', size: 'l' },
    placeholder : 'Size l'
}

xl

{
    block : 'input',
    mods : { theme : 'islands', size: 'xl' },
    placeholder : 'Size xl'
}

Custom fields of the block

name field

Type: String.

Specifies the block unique name.

{
    block : 'input',
    mods : { theme : 'islands', size: 'm' },
    name : 'Statistics'
}

val field

Type: String.

Specifies the content of the text field.

{
    block : 'input',
    mods : { theme : 'islands', size: 'm' },
    name : 'Statistics',
    val : 'Hello'
}

placeholder field

Type: String.

Specifies the hint in the text field.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Enter your name'
}

maxLength field

Type: Number.

Specifies the maximum number of characters allowed in the text field.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Enter your name',
    maxLength : 20
}

autocomplete field

Type: Boolean.

Specifies the browser predictions of the rest of the word while a user is typing.

If the autocomplete field is not specified, the autocomplete function is turned on by default.

To turn off the autocomplete function, use the false value:

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Enter your name',
    autocomplete : false
}

id field

Type: String.

Specifies the text field unique ID.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Enter your name',
    id : 'Unique_1'
}

tabIndex field

Type: Number.

Specifies the tab order when pressing Tab to navigate between controls on a page.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Enter your name',
    tabIndex : 3
}