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.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Enter your name'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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).
Open in a new window<span class="input input_theme_islands input_size_m input_type_password i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter the password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="password"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'password'
},
placeholder: 'Enter the password'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'password'
}
}
]
Search field (type modifier with search value)
Use to create the search field.
Open in a new window<span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your question" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Enter your question'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
width modifier
Acceptable value:'available'.
Use cases: BEMJSON.
Use to set the maximum available width to the text field.
Open in a new window<span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Enter your name'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
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.
Open in a new window<span class="input input_theme_islands input_size_m input_has-clear i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" value="Hello!" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"><span class="input__clear"></span></span>
</span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
'has-clear': true
},
val: 'Hello!'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
'has-clear': true
}
}
]
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.
Open in a new window<span class="input input_theme_islands input_size_m input_disabled i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your name" disabled="disabled" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
placeholder: 'Enter your name'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
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.
Open in a new window<span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your question" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Enter your question'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
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
Open in a new window<span class="input input_theme_islands input_size_s i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Size s" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Size s'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Size m" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Size m'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<span class="input input_theme_islands input_size_l i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Size l" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Size l'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<span class="input input_theme_islands input_size_xl i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Size xl" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Size xl'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Custom fields of the block
name field
Type: String.
Specifies the block unique name.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" name="Statistics" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Statistics'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
val field
Type: String.
Specifies the content of the text field.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" name="Statistics" value="Hello" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Statistics',
val: 'Hello'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
placeholder field
Type: String.
Specifies the hint in the text field.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Enter your name'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
maxLength field
Type: Number.
Specifies the maximum number of characters allowed in the text field.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" maxlength="20" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Enter your name',
maxLength: 20
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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:
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Enter your name',
autocomplete: false
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
id field
Type: String.
Specifies the text field unique ID.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" id="Unique_1" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Enter your name',
id: 'Unique_1'
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]
tabIndex field
Type: Number.
Specifies the tab order when pressing Tab to navigate between controls on a page.
Open in a new window<span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" tabindex="3" placeholder="Enter your name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Enter your name',
tabIndex: 3
}
[
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
}
]