You can use the form components with any validation library or framework of your choice. The form components sync with the native HTML5 form validation system built into the browser.
Field messages can be synced to the HTML5 form validaiton by setting the error attr with a ValidityState value on a field message. Validation can be disabled alltogether by using the novalidate attribute on the form.
Validation
code
<script type="module">
import '@blueprintui/components/include/input.js';
import '@blueprintui/icons/include.js';
import '@blueprintui/icons/shapes/close.js';
const form = document.querySelector('form');
const input = document.querySelector('bp-input');
const clearInput = document.querySelector('bp-button-icon[shape="close"]');
const clearForm = document.querySelector('bp-button');
clearInput.addEventListener('click', () => input.reset());
clearForm.addEventListener('click', () => form.reset());
</script>
<form bp-layout="block gap:md">
<bp-field validate>
<label>pattern</label>
<bp-input type="text" value="012 345 6789" pattern="[0-9]{3} [0-9]{3} [0-9]{4}">
<bp-button-icon type="button" shape="close" action="flat" slot="suffix" aria-label="clear"></bp-button-icon>
</bp-input>
<bp-field-message error="patternMismatch">pattern mismatch</bp-field-message>
</bp-field>
<bp-field validate>
<label>required</label>
<bp-input type="text" required></bp-input>
<bp-field-message error="valueMissing">value missing</bp-field-message>
</bp-field>
<bp-field validate>
<label>min/max</label>
<bp-input type="number" min="1" max="10" value="5"></bp-input>
<bp-field-message error="tooShort">too short</bp-field-message>
<bp-field-message error="tooLong">too long</bp-field-message>
</bp-field>
<bp-button type="button">reset</bp-button>
</form>
Install
NPM
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 |