lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPagePaginationPanelPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVClipboardColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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
typestringstring specifying the type of control to render
valuestring | number | FormData | Filecontrol value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
formNoValidatebooleandetermines if the form control is novalidate
namestringrepresents the name of the current
element as a string.
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
typestringstring specifying the type of control to render
valuestring | number | FormData | Filecontrol value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
formNoValidatebooleandetermines if the form control is novalidate
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters

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