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 pattern pattern mismatch required value missing min/max too short too long
code < script type = " module" > import '@blueprintui/components/include/input.js' ; </ script> < div 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-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> </ div>
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 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