Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Form Validation

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 mismatchvalue missingtoo shorttoo 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

// 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

NameTypesDescription
responsiveboolean
layoutFormLayout
layoutChange

Attributes

NameTypesDescription
responsiveboolean
layoutFormLayout

Slots

NameTypesDescription
default

bp-field

Properties

NameTypesDescription
layoutControlLayout
controlWidth'shrink'
inputControl

Attributes

NameTypesDescription
layoutControlLayout
control-width'shrink'

CSS Properties

NameTypesDescription
--background

Slots

NameTypesDescription
default

bp-field-message

Properties

NameTypesDescription
status'error' | 'success'Set the status of field message validation
errorkeyof ValidityStateHTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

Attributes

NameTypesDescription
status'error' | 'success'Set the status of field message validation
errorkeyof ValidityStateHTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

CSS Properties

NameTypesDescription
--color
--font-size
--font-weight
--max-width
--min-width

Slots

NameTypesDescription
defaultFor projecting helper message text