Forms

npm2.0.0

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

input label

message text

select label

Option One

Option Two

Option Three

password label

search label

time label

month label

range label

checkbox group label checkbox 1

checkbox 2

checkbox 3

radio group label radio 1

radio 2

radio 3

switch group label switch 1

switch 2

switch 3

message text

select label

Option One

Option Two

Option Three

message text

textarea label

message text

save

input label

message text

select label

Option One

Option Two

Option Three

password label

search label

time label

month label

range label

checkbox group label checkbox 1

checkbox 2

checkbox 3

radio group label radio 1

radio 2

radio 3

switch group label switch 1

switch 2

switch 3

message text

select label

Option One

Option Two

Option Three

message text

textarea label

message text

save

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

input label

message text

select label

Option One

Option Two

Option Three

password label

search label

time label

month label

range label

checkbox group label checkbox 1

checkbox 2

checkbox 3

radio group label radio 1

radio 2

radio 3

switch group label switch 1

switch 2

switch 3

message text

select label

Option One

Option Two

Option Three

message text

textarea label

message text

save

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

input label

message text

select label

Option One

Option Two

Option Three

password label

search label

time label

month label

range label

checkbox group label checkbox 1

checkbox 2

checkbox 3

radio group label radio 1

radio 2

radio 3

switch group label switch 1

switch 2

switch 3

message text

select label

Option One

Option Two

Option Three

message text

textarea label

message text

save

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

input label

message text

select label

Option One

Option Two

Option Three

password label

search label

time label

month label

range label

checkbox group label checkbox 1

checkbox 2

checkbox 3

radio group label radio 1

radio 2

radio 3

switch group label switch 1

switch 2

switch 3

message text

select label

Option One

Option Two

Option Three

message text

textarea label

message text

save

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

input label

message text

select label

Option One

Option Two

Option Three

password label

search label

time label

month label

range label

checkbox group label checkbox 1

checkbox 2

checkbox 3

radio group label radio 1

radio 2

radio 3

switch group label switch 1

switch 2

switch 3

message text

select label

Option One

Option Two

Option Three

message text

textarea label

message text

save

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

Properties

Name	Types	Description
`responsive`	`boolean`
`layout`	`FormLayout`	determine field layout

Attributes

Name	Types	Description
`responsive`	`boolean`
`layout`	`FormLayout`	determine field layout

Slots

Name	Types	Description
`default`

bp-field

Properties

Name	Types	Description
`layout`	`ControlLayout`
`controlWidth`	`'shrink'`
`inputControl`

Attributes

Name	Types	Description
`layout`	`ControlLayout`
`control-width`	`'shrink'`

CSS Properties

Name	Types	Description
`--background`

Slots

Name	Types	Description
`default`

bp-field-message

Properties

Name	Types	Description
`status`	`'error' \| 'success'`	Set the status of field message validation
`error`	`keyof ValidityState`	HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

Attributes

Name	Types	Description
`status`	`'error' \| 'success'`	Set the status of field message validation
`error`	`keyof ValidityState`	HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

CSS Properties

Name	Types	Description
`--color`
`--font-size`
`--font-weight`
`--max-width`
`--min-width`

Slots

Name	Types	Description
`default`		For projecting helper message text