lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupAvatarBadgeBreadcrumbButtonButton CopyButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat BytesFormat DatetimeFormat NumberFormat Relative TimeFormat TokenFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavNumberPagePaginationPanelPasswordPinProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectSkeletonStepperSwitchTabsTagTelephoneTextareaTimeToastToggletipTooltipTreeData 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

Form components provide base styles and validation behavior to all the native input types. Each form component is independently loaded.

Install

NPM

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

CDN

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

Horizontal Inline

Demonstrates form controls in horizontal inline layout.

message textOption OneOption TwoOption Three message textOption OneOption TwoOption Threemessage textmessage textsave

message textOption OneOption TwoOption Three message textOption OneOption TwoOption Threemessage textmessage textsave
code
<bp-form-group layout="horizontal-inline">
  <bp-field>
    <label>input label</label>
    <bp-input placeholder="name"></bp-input>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
  </bp-field>

  <bp-field>
    <label>password label</label>
    <bp-password value="123456"></bp-password>
  </bp-field>

  <bp-field>
    <label>search label</label>
    <bp-search placeholder="search"></bp-search>
  </bp-field>

  <bp-field>
    <label>time label</label>
    <bp-time value="11:00"></bp-time>
  </bp-field>

  <bp-field>
    <label>month label</label>
    <bp-month></bp-month>
  </bp-field>

  <bp-field>
    <label>telephone label</label>
    <bp-telephone></bp-telephone>
  </bp-field>

  <bp-field>
    <label>range label</label>
    <bp-range></bp-range>
  </bp-field>

  <bp-fieldset>
    <label>checkbox group label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>
  </bp-fieldset>

  <bp-fieldset>
    <label>radio group label</label>

    <label>radio 1</label>
    <bp-radio value="1" checked></bp-radio>

    <label>radio 2</label>
    <bp-radio value="2"></bp-radio>

    <label>radio 3</label>
    <bp-radio value="3"></bp-radio>
  </bp-fieldset>

  <bp-fieldset>
    <label>switch group label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>textarea label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-button>save</bp-button>
</bp-form-group>
<br /><br />
<bp-card>
  <bp-form-group layout="horizontal-inline">
    <bp-field>
      <label>input label</label>
      <bp-input placeholder="name"></bp-input>
      <bp-field-message>message text</bp-field-message>
    </bp-field>

    <bp-field>
      <label>select label</label>
      <bp-select>
        <bp-option value="1">Option One</bp-option>
        <bp-option value="2" selected>Option Two</bp-option>
        <bp-option value="3">Option Three</bp-option>
      </bp-select>
    </bp-field>

    <bp-field>
      <label>password label</label>
      <bp-password value="123456"></bp-password>
    </bp-field>

    <bp-field>
      <label>search label</label>
      <bp-search placeholder="search"></bp-search>
    </bp-field>

    <bp-field>
      <label>time label</label>
      <bp-time value="11:00"></bp-time>
    </bp-field>

    <bp-field>
      <label>month label</label>
      <bp-month></bp-month>
    </bp-field>

    <bp-field>
      <label>telephone label</label>
      <bp-telephone></bp-telephone>
    </bp-field>

    <bp-field>
      <label>range label</label>
      <bp-range></bp-range>
    </bp-field>

    <bp-fieldset>
      <label>checkbox group label</label>

      <label>checkbox 1</label>
      <bp-checkbox checked></bp-checkbox>

      <label>checkbox 2</label>
      <bp-checkbox></bp-checkbox>

      <label>checkbox 3</label>
      <bp-checkbox></bp-checkbox>
    </bp-fieldset>

    <bp-fieldset>
      <label>radio group label</label>

      <label>radio 1</label>
      <bp-radio value="1" checked></bp-radio>

      <label>radio 2</label>
      <bp-radio value="2"></bp-radio>

      <label>radio 3</label>
      <bp-radio value="3"></bp-radio>
    </bp-fieldset>

    <bp-fieldset>
      <label>switch group label</label>

      <label>switch 1</label>
      <bp-switch checked></bp-switch>

      <label>switch 2</label>
      <bp-switch></bp-switch>

      <label>switch 3</label>
      <bp-switch></bp-switch>

      <bp-field-message>message text</bp-field-message>
    </bp-fieldset>

    <bp-field>
      <label>select label</label>
      <bp-select>
        <bp-option value="1">Option One</bp-option>
        <bp-option value="2" selected>Option Two</bp-option>
        <bp-option value="3">Option Three</bp-option>
      </bp-select>
      <bp-field-message>message text</bp-field-message>
    </bp-field>

    <bp-field>
      <label>textarea label</label>
      <bp-textarea></bp-textarea>
      <bp-field-message>message text</bp-field-message>
    </bp-field>

    <bp-button>save</bp-button>
  </bp-form-group>
</bp-card>

Horizontal

Demonstrates form controls in horizontal layout.

message textOption OneOption TwoOption Three message textOption OneOption TwoOption Threemessage textmessage textsave
code
<bp-form-group layout="horizontal">
  <bp-field>
    <label>input label</label>
    <bp-input placeholder="name"></bp-input>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
  </bp-field>

  <bp-field>
    <label>password label</label>
    <bp-password value="123456"></bp-password>
  </bp-field>

  <bp-field>
    <label>search label</label>
    <bp-search placeholder="search"></bp-search>
  </bp-field>

  <bp-field>
    <label>time label</label>
    <bp-time value="11:00"></bp-time>
  </bp-field>

  <bp-field>
    <label>month label</label>
    <bp-month></bp-month>
  </bp-field>

  <bp-field>
    <label>telephone label</label>
    <bp-telephone></bp-telephone>
  </bp-field>

  <bp-field>
    <label>range label</label>
    <bp-range></bp-range>
  </bp-field>

  <bp-fieldset>
    <label>checkbox group label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>
  </bp-fieldset>

  <bp-fieldset>
    <label>radio group label</label>

    <label>radio 1</label>
    <bp-radio value="1" checked></bp-radio>

    <label>radio 2</label>
    <bp-radio value="2"></bp-radio>

    <label>radio 3</label>
    <bp-radio value="3"></bp-radio>
  </bp-fieldset>

  <bp-fieldset>
    <label>switch group label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>textarea label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-button>save</bp-button>
</bp-form-group>

Vertical

Demonstrates form controls in vertical layout.

message textOption OneOption TwoOption Three message textOption OneOption TwoOption Threemessage textmessage textsave
code
<bp-form-group>
  <bp-field>
    <label>input label</label>
    <bp-input placeholder="name"></bp-input>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
  </bp-field>

  <bp-field>
    <label>password label</label>
    <bp-password value="123456"></bp-password>
  </bp-field>

  <bp-field>
    <label>search label</label>
    <bp-search placeholder="search"></bp-search>
  </bp-field>

  <bp-field>
    <label>time label</label>
    <bp-time value="11:00"></bp-time>
  </bp-field>

  <bp-field>
    <label>month label</label>
    <bp-month></bp-month>
  </bp-field>

  <bp-field>
    <label>telephone label</label>
    <bp-telephone></bp-telephone>
  </bp-field>

  <bp-field>
    <label>range label</label>
    <bp-range></bp-range>
  </bp-field>

  <bp-fieldset>
    <label>checkbox group label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>
  </bp-fieldset>

  <bp-fieldset>
    <label>radio group label</label>

    <label>radio 1</label>
    <bp-radio value="1" checked></bp-radio>

    <label>radio 2</label>
    <bp-radio value="2"></bp-radio>

    <label>radio 3</label>
    <bp-radio value="3"></bp-radio>
  </bp-fieldset>

  <bp-fieldset>
    <label>switch group label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>textarea label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-button>save</bp-button>
</bp-form-group>

Vertical Inline

Demonstrates form controls in vertical inline layout.

message textOption OneOption TwoOption Three message textOption OneOption TwoOption Threemessage textmessage textsave
code
<bp-form-group layout="vertical-inline">
  <bp-field>
    <label>input label</label>
    <bp-input placeholder="name"></bp-input>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
  </bp-field>

  <bp-field>
    <label>password label</label>
    <bp-password value="123456"></bp-password>
  </bp-field>

  <bp-field>
    <label>search label</label>
    <bp-search placeholder="search"></bp-search>
  </bp-field>

  <bp-field>
    <label>time label</label>
    <bp-time value="11:00"></bp-time>
  </bp-field>

  <bp-field>
    <label>month label</label>
    <bp-month></bp-month>
  </bp-field>

  <bp-field>
    <label>telephone label</label>
    <bp-telephone></bp-telephone>
  </bp-field>

  <bp-field>
    <label>range label</label>
    <bp-range></bp-range>
  </bp-field>

  <bp-fieldset>
    <label>checkbox group label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>
  </bp-fieldset>

  <bp-fieldset>
    <label>radio group label</label>

    <label>radio 1</label>
    <bp-radio value="1" checked></bp-radio>

    <label>radio 2</label>
    <bp-radio value="2"></bp-radio>

    <label>radio 3</label>
    <bp-radio value="3"></bp-radio>
  </bp-fieldset>

  <bp-fieldset>
    <label>switch group label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>textarea label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-button>save</bp-button>
</bp-form-group>

Compact

Demonstrates form controls in compact layout.

message textOption OneOption TwoOption Three message text message text message textOption OneOption TwoOption Threemessage textmessage textsave
code
<bp-form-group layout="compact">
  <bp-field>
    <label>input label</label>
    <bp-input placeholder="name"></bp-input>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
  </bp-field>

  <bp-field>
    <label>password label</label>
    <bp-password value="123456"></bp-password>
  </bp-field>

  <bp-field>
    <label>search label</label>
    <bp-search placeholder="search"></bp-search>
  </bp-field>

  <bp-field>
    <label>time label</label>
    <bp-time value="11:00"></bp-time>
  </bp-field>

  <bp-field>
    <label>month label</label>
    <bp-month></bp-month>
  </bp-field>

  <bp-field>
    <label>telephone label</label>
    <bp-telephone></bp-telephone>
  </bp-field>

  <bp-field>
    <label>range label</label>
    <bp-range></bp-range>
  </bp-field>

  <bp-fieldset>
    <label>checkbox group label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>
    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset>
    <label>radio group label</label>

    <label>radio 1</label>
    <bp-radio value="1" checked></bp-radio>

    <label>radio 2</label>
    <bp-radio value="2"></bp-radio>

    <label>radio 3</label>
    <bp-radio value="3"></bp-radio>
    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset>
    <label>switch group label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-field>
    <label>select label</label>
    <bp-select>
      <bp-option value="1">Option One</bp-option>
      <bp-option value="2" selected>Option Two</bp-option>
      <bp-option value="3">Option Three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>textarea label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-button>save</bp-button>
</bp-form-group>

bp-fieldset

Properties

NameTypesDescription
layoutFormLayoutdetermine field layout

Attributes

NameTypesDescription
layoutFormLayoutdetermine field layout

Slots

NameTypesDescription
default

bp-field

Properties

NameTypesDescription
layoutControlLayout
controlWidth'shrink'
inputControl

Attributes

NameTypesDescription
layoutControlLayout
control-width'shrink'

CSS Properties

NameTypesDescription
--background

Slots

NameTypesDescription
default

bp-field-message

Properties

NameTypesDescription
status'error' | 'success'Set the status of field message validation
errorkeyof ValidityStateHTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

Attributes

NameTypesDescription
status'error' | 'success'Set the status of field message validation
errorkeyof ValidityStateHTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

CSS Properties

NameTypesDescription
--color
--font-size
--font-weight
--max-width
--min-width

Slots

NameTypesDescription
defaultFor projecting helper message text