Text / Textarea

Form input for text data. Both <input/> and <textarea> are covered by this component.

NOTE

Please be sure to read the Basic concepts part of the documentation first.

Basic usage

Basic input text. The first demo demonstrates both a FormControl and v-model usage, but others demos will use either one depending on what's best depending on the demo.

States

Here a demo that illustrates the different states a control can take:

TIP

By default, errors are "floating" (meaning they show as a popover), you can make them show under the field by setting floating-errors to false.

But, the setting is ignored if the control is inside an addon of another component. In this case the errors will always be floating.

Help text

You can add a little help text below the field via the help slot:

TIP

By default, the help text is not "floating", you can make them float by setting floating-help to true.

But, the setting is ignored if the control is inside an addon of another component. In this case the help text will always be floating.

Validation

Here's a little sneak peek of the validation.

TIP

For more detail on how the validation works, please refer to:

the Validation component documentation,
the Validators components for inline (in HTML) validation.

Addons

Addons can be added before and after each component using the before and after slot:

NOTE

The before and after slot come with a built-in design that better integrates them with the field. They are meant to hold simple text or icons.

Raw

For more complex addons, like a button or another control, you should user the before-raw and after-raw slots that do not come with any embedded design constraint, that's up to you to make them blend with the field.

Here is an example:

WARNING

Raw addon integration for buttons comes with the default theme of Banquette. If you use the buttons without the theme, the rendering will not be as it is here.

Click here to show the adjustments made in the theme

{
    // If we are in any control that uses the base input.
    match: {parent: 'bt-form-base-input'},
    
    // We remove the unwanted borders and rounding.
    cssCode: `
        :global(.before) &.bt-button .inner {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
        }

        :global(.after) &.bt-button .inner {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    `
}

// Also, we adjust the border color if the button has the `light` variant
// because it's not the same gray as the one used by form components.
{
    match: {parent: 'bt-form-base-input', variant: 'light'},
    cssCode: `
        &.bt-button .inner {     
            border-color: var(--bt-color-gray-200);
        }
    `
}

Textarea

To create a textarea, set the type to textarea:

Auto size

If autoSize is true, the textarea will resize automatically to fit the number of lines of the content.

You can constrain the size using the minRows and maxRows props.

Clearable

You can allow the user to clear the value of the input via the clearable prop:

Debug

If you add the debug attribute to the component, a little icon shows on the right, allowing you to inspect the whole viewData object exposed by the component.

If you don't know what the viewData object is, please refer to this part of the documentation.

Props

Method	Description	Default
v-model	Bidirectional binding for the value of the control.	`undefined`
value	The original value given by the end-user through the html element.	`undefined`
label	The label of the field. Overridden by the `default` slot.	`null`
placeholder	A placeholder value to show when there is no value selected.	`null`
help	A help text to show to the user. Overridden by the `help` slot.	`null`
floating-label	If `true` the label will float above the control and act as a placeholder is there is none.	`true`
floating-errors	If `true` the errors will appear as an icon on the right side of the input that shows a popover. This value is overridden to `true` internally if the control is in a group to preserve layout integrity.	`true`
floating-help	If `true` the help text will appear as an icon on the right side of the input that shows a popover. This value is overridden to `true` internally if the control is in a group to preserve layout integrity.	`false`
required	If `true`, a little asterisk extra is shown, indicating to the user that the field is mandatory.	`false`
disabled	For external control of the `disabled` state of the control.	`false`
busy	For external control of the `busy` state of the control.	`false`
debug	If `true`, show the debug overlay.	`false`
tab-index	HTML tab index (for keyboard navigation).	`0`
autofocus	If `true`, the control will try to gain focus when mounted.	`false`
type	Input type.	`'text'`
auto-complete	The value of the `autocomplete` HTML attribute.	`'off'`
auto-size	If `true`, the view value "rows" will be automatically adjusted based on the number of line breaks in the control's value.	`false`
clearable	If `true`, the user can clear the value of the input via an icon.	`false`
resizable textarea only	Control the manual resizing of the textarea. If `autoSize` is `true`, the resize is automatically disabled.	`false`
rows textarea only	Define a specific number of rows.	`null`
min-rows textarea only	Define the minimum number of rows of the textarea.	`null`
max-rows textarea only	Define the maximum number of rows of the textarea.	`null`

Slots

Name	Description
default or label	Defines the label of the field. This slot takes priority over the `label` prop. Props: none
help	Defines the help text of the field. This slot takes priority over the `help` prop. Props: none
before	Defines the content of the addon to show before the field. Props: none
before-raw	Defines the content of the un-styled addon to show before the field. Props: none
after	Defines the content of the addon to show after the field. Props: none
after-raw	Defines the content of the un-styled addon to show after the field. Props: none
extras-before	Defines custom floating extras that appear before the built-in ones. Props: none
extras-after	Defines custom floating extras that appear after the built-in ones. Props: none

Theming

Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

Variables

Variable	Default	Comment
fontFamily	`var(--bt-font-family-base)`	-
fontSize	`var(--bt-font-size-base)`	-
fontWeight	`var(--bt-font-weight-normal)`	-
textColor	`var(--bt-text-color-base)`	-
backgroundColor	`var(--bt-color-white)`	-
backgroundDisabledColor	Same as `backgroundColor`	-
borderColor	`var(--bt-color-gray-200)`	-
borderRadius	`var(--bt-border-radius-base)`	-
borderWidth	`var(--bt-border-width-base)`	-
borderStyle	`var(--bt-border-style-base)`	-
borderFocusWidth	Same as `borderWidth`	-
borderFocusColor	`var(--bt-color-primary)`	-
borderErrorWidth	Same as `borderWidth`	-
borderErrorColor	`var(--bt-color-red-500)`	-
borderDisabledColor	`var(--bt-color-gray-200)`	-
placeholderX	`0.8rem`	-
placeholderY	`0.75rem`	-
labelTextColor	`var(--bt-text-color-light)`	-
labelTransitionDuration	`0.2s`	-
helpTextColor	`var(--bt-text-color-light)`	-
helpFontSize	`var(--bt-font-size-sm)`	-
errorTextColor	`var(--bt-color-red-500)`	-
errorFontSize	`var(--bt-font-size-sm)`	-
disabledOpacity	`0.5`	-
addonBackgroundColor	`var(--bt-color-gray-50)`	-
addonTextColor	`var(--bt-text-color-light)`	-

Selectors

Name	Comment
root	The root container.
label	The container of the label.
help	The non floating help text container.
before	The before slot container.
after	The after slot container.
floatingExtras	The container of the floating extras.
inputGroup	A container that only include the form field.
input	The actual form control.

Examples:

cssSelectors: {
    input: {
        background: '...'
    },
    floatingExtras: {
        color: '...'
    }
}

# Text / Textarea

# Basic usage

# States

# Help text

# Validation

# Addons

# Raw

# Textarea

# Auto size

# Clearable

# Debug

# Props

# Slots

# Theming

# Variables

# Selectors