Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Usage

The text input component is used to allow users to input and edit text. The text input should have a clear, descriptive label that explains what the user should enter as well as a placeholder text that gives an example of the expected input format.

Example

code
<script type="module">
import '@blueprintui/components/include/input.js';
</script>

<bp-field>
<label>label</label>
<bp-input></bp-input>
</bp-field>

Vertical

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="vertical">
<bp-field>
<label>label</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message>message text</bp-field-message>
</bp-field>

<bp-field>
<label>disabled</label>
<bp-input placeholder="name" disabled></bp-input>
<bp-field-message>disabled message</bp-field-message>
</bp-field>

<bp-field>
<label>error</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>

<bp-field>
<label>success</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>

Horizontal

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message>message text</bp-field-message>
</bp-field>

<bp-field layout="horizontal">
<label>disabled</label>
<bp-input placeholder="name" disabled></bp-input>
<bp-field-message>disabled message</bp-field-message>
</bp-field>

<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>

<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>

Compact

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message>message text</bp-field-message>
</bp-field>

<bp-field layout="compact">
<label>disabled</label>
<bp-input placeholder="name" disabled></bp-input>
<bp-field-message>disabled message</bp-field-message>
</bp-field>

<bp-field layout="compact" status="error">
<label>error</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>

<bp-field layout="compact" status="success">
<label>success</label>
<bp-input placeholder="name"></bp-input>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/input.js';

CDN

<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/input.js/+esm';
</script>

Accessibility

  • The text input should have a clear and visible label.
  • It should have an appropriate input type attribute.
  • It should have a clear and visible focus state and be keyboard navigable.
  • It should support ARIA attributes such as aria-describedby and aria-label if not visible label is provided.

bp-input

Events

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
typestring
valuestring | FormData
disabledboolean
requiredboolean
readonlyboolean | undefined
multipleboolean
autocompletestring
namestring
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber
valueAsNumber
formAssociatedboolean

Attributes

NameTypesDescription
typestring
valuestring | FormData
disabledboolean
requiredboolean
readonlyboolean | undefined
multipleboolean
autocompletestring
namestring
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber

CSS Properties

NameTypesDescription
--background-size
--color
--background
--border
--border-radius
--outline
--outline-offset
--padding
--font-size
--line-height
--height
--min-width
--width
--transition
--text-align
--cursor

Slots

NameTypesDescription
prefixslot for prefix text or icons
suffixslot for suffic text or icons