Skip to content

Latest commit

 

History

History
256 lines (201 loc) · 5.28 KB

input.en.md

File metadata and controls

256 lines (201 loc) · 5.28 KB
Raw

input

input block is designed to create different types of text fields:

  • input field (default value);
  • text area;
  • password field;
  • search form.

Custom fields of a block

The following custom fields could be specified in BEMJSON declaration of the block:

Custom field name Type Description
val String Specifies value that will be sent to a server or obtained using client scripts. It is empty by default. Pair name=val is sent to a server, where name is set by name attribute and value – by val attribute.
name String Defines name of an input field that is used for its identification.
placeholder String A hint that describes expected value of an input field.
id String Unique block identifier. Should be specified manually in BEMJSON file.
maxLength String Specifies maximum number of characters allowed in input field.
tabIndex String Specifies the position of current input block in the tabbing order for current page.

Additional required HTML attributes could be specified in attrs field of BEMJSON.

Modifiers of a block

_theme

Block supports the following themes:

  • simple
  • islands (NB! Choosing a theme islands requires additional modifier size.)

If theme modifier is not specified, native representation of a control is applied.

See following examples:

default

{
    block : 'input',
    placeholder : 'default'
}

simple

{
    block : 'input',
    mods : { theme : 'simple' },
    placeholder : 'simple'
}

islands

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

_size

Implemented only for theme islands.

Provides with size values to all types of text fields.

There are four sizes available: s, m, l, xl.

Size Font size String height
s 13px 24px
m 13px 28px
l 15px 32px
xl 18px 38px

See following examples:

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

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

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

{
    block : 'input',
    mods : { theme : 'islands', size: 'xl' },
    placeholder : 'X-Large'
}

_type

Following types of input block are available:

  • text area (input_type_textarea)
{
    block : 'input',
    mods : { theme : 'islands', size : 'm', type : 'textarea' },
    placeholder : 'Text area'
}
  • password field (input_type_password)
{
    block : 'input',
    mods : { theme : 'islands', size: 'm', type : 'password' },
    placeholder : 'Password field'
}
  • search form (input_type_search)
{
    block : 'input',
    mods : { theme : 'islands', size : 'm', type : 'search' },
    placeholder : 'Search form'
}

If type modifier is not specified, input block obtains <input type="text"/> value by default.

States of a block

_disabled

disabled modifier is used to make block visible but not available for user action. It cannot be focused by pressing ‘Tab’, clicking a mouse, etc. In most cases to mark out the disabled block on a page, additional styles are applied.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', disabled : true },
    val : 'Disabled'
}

_focused

When a block is focused, a modifier ‘focused’ with ‘true’ value is set automatically, e.g. by pressing ‘Tab’ or clicking a mouse.

_has-clear

has-clear modifier is set automatically when some data is entered into an input field. This modifier is used to add clear element.

Block elements

The following elements provide visual representation of input block:

__clear

This element is used to clear input field content.

__box

Element for grouping native <input> field and additional elements (e.g clear).

An auxiliary element is added to the block on template engine level.

__control

An auxiliary element is added to the block on template engine level.