lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn 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

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>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-form-group layout="horizontal-inline">
    <bp-input-group layout="horizontal-inline">
      <label>input group label</label>
      <bp-select control-width="shrink">
        <select aria-label="protocol">
          <option>http://</option>
          <option>https://</option>
        </select>
      </bp-select>
      <bp-input>
        <input placeholder="localhost:8000" type="url" aria-label="host port" />
        <bp-button-icon slot="suffix" readonly aria-label="host status stable">
          <bp-icon shape="cloud" badge="success"></bp-icon>
        </bp-button-icon>
      </bp-input>
      <bp-field-message>Host ID: 123456</bp-field-message>
    </bp-input-group>

    <bp-file layout="horizontal-inline">
      <label>file label</label>
      <input type="file" multiple />
    </bp-file> -->

  <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>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

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>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

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>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

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>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

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>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