Form Interactions

npm2.0.0

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 action="flat" readonly slot="suffix">.com</bp-button>
    </bp-input>
  </bp-field>

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

  <bp-field>
    <label>prefix + suffix</label>
    <bp-input type="url">
      <bp-button action="flat" readonly slot="prefix">https://</bp-button>
      <bp-button action="flat" readonly slot="suffix">.com</bp-button>
    </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.

Icon 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.js';
</script>
<bp-form-group layout="vertical">
  <bp-field>
    <label>icon</label>
    <bp-input placeholder="example">
      <bp-button-icon readonly slot="prefix" action="inline">
        <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 action="inline" 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 action="inline" slot="label" shape="info" 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" action="inline" 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
`accessor`		determine field layout
`responsive`	`boolean`
`layout`	`FormLayout`

Attributes

Name	Types	Description
`accessor`		determine field layout

Slots

Name	Types	Description
`default`

bp-field

Properties

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

Attributes

Name	Types	Description
`accessor`
`control-width`

CSS Properties

Name	Types	Description
`--background`

Slots

Name	Types	Description
`default`

bp-field-message

Properties

Name	Types	Description
`accessor`		HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
`status`	`'error' \| 'success'`
`error`	`keyof ValidityState`

Attributes

Name	Types	Description
`accessor`		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