TextField
Widget

Text field widget, wraps native <input type="text">. Supports two renditions, 'outlined' and 'filled':

This field can be used as an editor for the Column. It is used as the default editor for the Column, TemplateColumn, TreeColumn, and for other columns if another editor is not specified explicitly, or disabled by setting false value.

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

rendition : 'outlined'/'filled'/String
Predefined style to use for the field. Possible values are:
- 'outlined' (default)
- 'filled'
The supplied value will be part of the field's class list, as b-text-field-{rendition}.

Has a corresponding runtime rendition property.
maxLength : Number

The max number of characters for the input field
minLength : Number

The min number of characters for the input field

Properties

Properties are getters/setters or publicly accessible variables on this class

isTextField : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TextField class, or subclass thereof.

rendition : 'outlined'/'filled'/String
Predefined style to use for the field. Possible values are:
- 'outlined' (default)
- 'filled'
The supplied value will be part of the field's class list, as b-text-field-{rendition}.

Has a corresponding rendition config.
isTextField : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TextField class, or subclass thereof.

Functions

Functions are methods available for calling on the class

getCurrentToken( delimiter/\s/ )
: Object

internal

Returns the current token - the token that the cursor is within or adjacent to in the input field as separated by space, or the passed regular expression.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-field-trigger-color	Field trigger color
--b-field-trigger-edge-gap	Gap between first / last field trigger and field edge (applied as padding to be clickable)
--b-field-trigger-gap	Field trigger's gap (applied as padding to be clickable)
--b-spin-trigger-font-size	Spin trigger icon font-size (number field)
--b-text-field-background	Field background, normally determined by used rendition
--b-text-field-border-color	Field border-color
--b-text-field-border-radius	Field's border-radius
--b-text-field-border-style	Field's border-style
--b-text-field-color	Field color
--b-text-field-default-label-padding	Label padding to use when no `labelPosition` is set
--b-text-field-default-template-areas	Template areas to use when no `labelPosition` is set
--b-text-field-default-template-columns	Template columns to use when no `labelPosition` is set
--b-text-field-default-template-rows	Template rows to use when no `labelPosition` is set
--b-text-field-default-width	Default width applied to a text field's is used in a toolbar, or not used in a Bryntum container (includes the label)
--b-text-field-empty-label-font-size	Label font-size when field is empty
--b-text-field-empty-label-scale	Label scale when empty (used by material)
--b-text-field-filled-background	filled Field background, when using filled rendition
--b-text-field-filled-border-radius	filled Field border-radius, when using filled rendition
--b-text-field-filled-border-width	filled Field border-width, when using filled rendition
--b-text-field-filled-empty-label-padding	filled Padding for label of an empty field, when using filled rendition
--b-text-field-filled-input-padding	filled Input padding, when using filled rendition
--b-text-field-filled-label-above-padding	filled Padding for label positioned above the field, when using filled rendition
--b-text-field-filled-label-before-padding	filled Padding for label positioned before the field, when using filled rendition
--b-text-field-filled-label-padding	filled Label padding, when using filled rendition
--b-text-field-filled-material-empty-label-font-size	filled Font-size for empty field's label, using filled rendition in material
--b-text-field-filled-material-empty-label-left	filled Label left for empty field, using filled rendition in material
--b-text-field-filled-material-empty-label-top	filled Label top for empty field, using filled rendition in material
--b-text-field-filled-material-label-cursor	filled Label cursor, using filled rendition in material
--b-text-field-filled-material-label-left	filled Label left, using filled rendition in material
--b-text-field-filled-material-label-position	filled Label position property, using filled rendition in material
--b-text-field-filled-material-label-top	filled Label top, using filled rendition in material
--b-text-field-filled-material-trigger-empty-label-left	filled Label left for empty field with trigger, using filled rendition in material
--b-text-field-filled-material-trigger-label-left	filled Label left for field with trigger, using filled rendition in material
--b-text-field-filled-no-label-input-padding	filled Input padding for field without label, when using filled rendition
--b-text-field-font-weight	Field's font-weight
--b-text-field-input-color	Input color (color of entered text)
--b-text-field-input-font-size	Input font-size
--b-text-field-input-height	Input height
--b-text-field-input-padding	Input padding
--b-text-field-label-above-grid-area	Label grid-area when the label is placed above the field
--b-text-field-label-background	Label background
--b-text-field-label-color	Label color
--b-text-field-label-font-size	Label font-size
--b-text-field-label-grid-area	Label grid-area, normally determined by used rendition
--b-text-field-label-padding	Label padding
--b-text-field-label-scale	Label scale (used by material)
--b-text-field-material-label-cursor	Label cursor (material)
--b-text-field-material-label-left	Label left (material)
--b-text-field-material-label-position	Label position (material)
--b-text-field-material-label-top	Label top (material)
--b-text-field-outlined-background	outlined Field background, when using outlined rendition
--b-text-field-outlined-border-color	outlined Field border-color, when using outlined rendition
--b-text-field-outlined-border-radius	outlined Outlined field's border-radius
--b-text-field-outlined-border-radius	outlined Field border-radius, when using outlined rendition
--b-text-field-outlined-border-width	outlined Field border-width, when using outlined rendition
--b-text-field-outlined-empty-label-padding	outlined Padding for label of an empty field, when using outlined rendition
--b-text-field-outlined-focus-border-width	outlined Focused field's border-width, when using outlined rendition
--b-text-field-outlined-input-padding	outlined Field input padding, when using outlined rendition
--b-text-field-outlined-label-above-padding	outlined Padding for label positioned above the field, when using outlined rendition
--b-text-field-outlined-label-background	outlined Label background, when using outlined rendition
--b-text-field-outlined-label-before-padding	outlined Padding for label positioned before the field, when using outlined rendition
--b-text-field-outlined-label-padding	outlined Label padding, when using outlined rendition
--b-text-field-outlined-material-empty-label-background	outlined Background for empty field's label, using outlined rendition in material
--b-text-field-outlined-material-empty-label-left	outlined Label left for empty field, using outlined rendition in material
--b-text-field-outlined-material-empty-label-padding	outlined Label padding for empty field, using outlined rendition in material
--b-text-field-outlined-material-empty-label-top	outlined Label top for empty field, using outlined rendition in material
--b-text-field-outlined-material-label-cursor	outlined Label cursor, using outlined rendition in material
--b-text-field-outlined-material-label-left	outlined Label left, using outlined rendition in material
--b-text-field-outlined-material-label-position	outlined Label position property, using outlined rendition in material
--b-text-field-outlined-material-label-top	outlined Label top, using outlined rendition in material
--b-text-field-outlined-material-trigger-empty-label-left	outlined Label left for field with trigger, using outlined rendition in material
--b-text-field-padding	Field's padding
--b-text-field-selection-background	Background for selected text
Disabled
--b-text-field-disabled-opacity	Field's opacity when disabled
--b-text-field-trigger-disabled-color	Field trigger's color when disabled
Focused
--b-text-field-filled-focus-background	filled Focused field's background, when using filled rendition
--b-text-field-filled-focus-border-width	filled Focused field's border-width, when using filled rendition
--b-text-field-filled-focus-label-color	filled Focused field's label color, when using filled rendition
--b-text-field-focus-border-color	Focused field's border-color
--b-text-field-focus-border-style	Field's border-style when focused
--b-text-field-outlined-focus-background	outlined Background for focused field, when using outlined rendition
--b-text-field-outlined-focus-label-color	outlined Label color for focused field, when using outlined rendition
Hovered
--b-text-field-filled-hover-background	filled Hovered field's background, when using filled rendition
--b-text-field-hover-border-color	Field border-color when hovered
--b-text-field-outlined-hover-background	outlined Background for hovered field, when using outlined rendition
--b-text-field-outlined-hover-border-color	outlined Border color for hovered field, when using outlined rendition
Invalid
--b-text-field-invalid-border-color	Invalid field's border-color
--b-text-field-invalid-label-color	Invalid field's label color
Read-only
--b-text-field-trigger-read-only-color	Field trigger's color when readonly

TextField
Widget

Configs

Properties

Functions

CSS variables

Source path

Inheritance tree4

Mixins9

Contents

TextField Widget

Configs

Properties

Functions

CSS variables

Source path

Inheritance tree4

Mixins9

Contents

TextField
Widget