Skip to content

Latest commit

 

History

History
242 lines (168 loc) · 4.93 KB

textarea.en.md

File metadata and controls

242 lines (168 loc) · 4.93 KB
Raw

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.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm', width : 'available' },
    placeholder : 'Your text should be here'
}

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 : 'textarea',
    mods : { theme : 'islands', size : 'm', disabled : true },
    placeholder : 'Your text should be here'
}

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.

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    placeholder : 'Your text should be here'
}

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

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

m

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

l

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

xl

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

Custom fields of the block

name field

Type: String.

Specifies the block unique name.

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    name : 'Feedback'
}

val field

Type: String.

Specifies the content of the text area.

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    name : 'Feedback',
    val : 'The text should be changed if necessary'
}

placeholder field

Type: String.

Specifies the hint in the text area.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Your text should be here'
}

id field

Type: String.

Specifies the text area unique ID.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Your text should be here',
    id : 'Unique_1'
}

tabIndex field

Type: Number.

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

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Your text should be here',
    tabIndex : 1
}