Form Interactions

npm1.8.3

github

Prefix Suffix

suffix

.com

prefix

https://

prefix + suffix

https://

.com

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>suffix</label>
    <bp-input type="url">
      <bp-button-icon readonly slot="suffix">.com</bp-button-icon>
    </bp-input>
  </bp-field>

  <bp-field>
    <label>prefix</label>
    <bp-input type="url">
      <bp-button-icon readonly slot="prefix">https://</bp-button-icon>
    </bp-input>
  </bp-field>

  <bp-field>
    <label>prefix + suffix</label>
    <bp-input type="url">
      <bp-button-icon readonly slot="prefix">https://</bp-button-icon>
      <bp-button-icon readonly slot="suffix">.com</bp-button-icon>
    </bp-input>
  </bp-field>
</bp-form-group>

Icon buttons can be used to add prefix and suffix labels to form inputs, such as text fields and select boxes.

Icons Buttons

icon

icon button

icon button label

icon button message

message text

code

<script type="module">
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/cloud.js';
  import '@blueprintui/icons/shapes/close.js';
  import '@blueprintui/icons/shapes/info-circle.js';
</script>
<bp-form-group layout="vertical">
  <bp-field>
    <label>icon</label>
    <bp-input placeholder="example">
      <bp-button-icon readonly slot="prefix">
        <bp-icon shape="cloud" badge="success"></bp-icon>
      </bp-button-icon>
    </bp-input>
  </bp-field>

  <bp-field>
    <label>icon button</label>
    <bp-input type="url">
      <bp-button-icon shape="close" slot="suffix" aria-label="clear example input"></bp-button-icon>
    </bp-input>
  </bp-field>

  <bp-field>
    <label>icon button label</label><bp-button-icon slot="label" shape="info-circle" aria-label="get more details"></bp-button-icon>
    <bp-input placeholder="example"></bp-input>
  </bp-field>

  <bp-field>
    <label>icon button message</label>
    <bp-input></bp-input>
    <bp-field-message>
      message text
      <bp-button-icon shape="info-circle" aria-label="get more details"></bp-button-icon>
    </bp-field-message>
  </bp-field>

  <!-- <bp-password>
        <label>additional actions to existing input types</label>
        <input type="password" value="123456" />
        <bp-button-icon shape="close" aria-label="clear password input"></bp-button-icon>
      </bp-password> -->
</bp-form-group>

Icon button can be used to add prefix and suffix icons to form inputs types. Interactive icon buttons should have aria-label attribute to provide a label for screen readers.

Readonly

readonly input

code

<bp-field layout="vertical" control-width="shrink">
  <label>readonly input</label>
  <bp-input placeholder="name" readonly></bp-input>
</bp-field>

Input Width

vertical shrink width

horizontal shrink width

vertical custom width

code

<div bp-layout="block gap:lg">
  <bp-field layout="vertical" control-width="shrink">
    <label>vertical shrink width</label>
    <bp-input placeholder="name"></bp-input>
  </bp-field>

  <bp-field layout="horizontal" control-width="shrink">
    <label>horizontal shrink width</label>
    <bp-input placeholder="name"></bp-input>
  </bp-field>

  <bp-field layout="vertical" style="max-width: 300px">
    <label>vertical custom width</label>
    <bp-input placeholder="name"></bp-input>
  </bp-field>
</div>

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>

bp-fieldset

Properties

Name	Types	Description
`responsive`	`boolean`
`layout`	`FormLayout`
`layoutChange`

Attributes

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

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