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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Your text should be here'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
placeholder: 'Your text should be here'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Size s'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Size m'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Size l'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Size xl'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Feedback'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Feedback',
val: 'The text should be changed if necessary'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here',
id: 'Unique_1'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Your text should be here',
tabIndex: 1
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps