textarea
Use this block for creating a text area that allows to enter multiple lines of a text.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| width |
'available' |
BEMJSON |
The maximum allowed width of the text area. |
| 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 area. Use sizes only for text areas 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 area. |
| placeholder |
String |
The hint in the text area. |
| id |
String |
The unique identifier of the block. |
| tabIndex |
Number |
The order when navigating through controls on a page by pressing the Tab key. |
Block description
Use the textarea block to create the text area that allows to enter multiple lines of the text.
Modifiers of the block
width modifier
Acceptable value:'available'.
Use cases: BEMJSON.
Use to set the maximum available width of the text area.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea_width_available textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Your text should be here"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Your text should be here'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
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<textarea class="textarea textarea_theme_islands textarea_size_m textarea_disabled textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Your text should be here" disabled="disabled"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
placeholder: 'Your text should be here'
}
[
{
block: 'textarea',
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 : 'textarea',
mods : { theme : 'islands', size : 'm', focused : true },
placeholder : 'Your text should be here'
}
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<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Your text should be here"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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 areas.
s
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_s textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Size s"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Size s'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Size m"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Size m'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_l textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Size l"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Size l'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_xl textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Size xl"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Size xl'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Custom fields of the block
name field
Type: String.
Specifies the block unique name.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' name="Feedback"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Feedback'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
val field
Type: String.
Specifies the content of the text area.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' name="Feedback">The text should be changed if necessary</textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Feedback',
val: 'The text should be changed if necessary'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
placeholder field
Type: String.
Specifies the hint in the text area.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Your text should be here"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
id field
Type: String.
Specifies the text area unique ID.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' id="Unique_1" placeholder="Your text should be here"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here',
id: 'Unique_1'
}
[
{
block: 'textarea',
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<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' tabindex="1" placeholder="Your text should be here"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here',
tabIndex: 1
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]