Form Interactions

npm2.0.0

github

Prefix Suffix

Shows input with prefix and suffix content.

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

Demonstrates input with icon buttons for actions.

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

Shows the input in readonly state.

readonly input

code

<bp-field>
  <label>readonly input</label>
  <bp-input placeholder="name" readonly></bp-input>
</bp-field>

Input Width

Demonstrates various input width configurations.

default width

shrink width

custom width

code

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

  <bp-field control-width="shrink">
    <label>shrink width</label>
    <bp-input placeholder="name" value="123456789012345678901234567890123456789012345678901234567890"></bp-input>
  </bp-field>

  <bp-field style="max-width: 300px">
    <label>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
`layout`	`FormLayout`	determine field layout

Attributes

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