Integration
By utilizing the Integration feature of usebootstrap, you can achieve data retrieval from servers, display, JsonSchema validation, and Post updates solely with components, without the need for scripting.
For more details, please refer to the integration page.
<template>
<ViewState
v-slot="user"
src="reqres://users/5"
path="data"
schema-src="app-config://usebootstrap/schemas/basic"
>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
ID
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:value="user.data.id"
readonly="plaintext"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="email"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your email
</BValidFeedback>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
first_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="first_name"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
last_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="last_name"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
</Row>
<ActionState src="reqres://user/5">
<template #default="{ action }">
<b-button
color="primary"
:disabled="!user.validationResult.valid"
@click="action('post', user.data)"
>
Action
</b-button>
</template>
<template #fallback>
<b-button
color="primary"
disabled
>
<Spinner
spinner="grow"
sm
aria-hidden="true"
/>
Loading...
</b-button>
</template>
<template #complete="{ data, status }">
<b-button
color="success-subtle"
color-generate
@click="status.value = 0"
>
Retry
</b-button>
<div v-if="status.value == 201">
Response: {{ data }}
</div>
<div v-else>
ErrorMessages: {{ data }}
</div>
</template>
</ActionState>
</ViewState>
</template>
Overview
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.
- Password
- Checked
- false
<template>
<BForm>
<BFormControl margin="b-3">
<BFormLabel>Email address</BFormLabel>
<BFormInput
v-model="email"
type="email"
/>
<BFormText>We'll never share your email with anyone else.</BFormText>
</BFormControl>
<BFormControl margin="b-3">
<BFormLabel>Password</BFormLabel>
<BFormInput
v-model="password"
type="password"
/>
</BFormControl>
<BFormCheck margin="b-3">
<BFormCheckInput v-model="checked" />
<BFormCheckLabel>Check me out</BFormCheckLabel>
</BFormCheck>
<b-button
type="submit"
color="primary"
>
Submit
</b-button>
</BForm>
<b-dl margin="t-2">
<b-dt col="sm-3">
Email
</b-dt>
<b-dd col="sm-9">
{{ email }}
</b-dd>
<b-dt col="sm-3">
Password
</b-dt>
<b-dd col="sm-9">
<span>{{ password }}</span>
</b-dd>
<b-dt col="sm-3">
Checked
</b-dt>
<b-dd col="sm-9">
{{ checked }}
</b-dd>
</b-dl>
</template>
<script setup>
const email = ref('email');
const password = ref('');
const checked = ref(false);
</script>
Form text
Block-level or inline-level form text can be created using FormText.
Form text below inputs can be styled with FormText.
If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
<template>
<BFormControl>
<BFormLabel>Password</BFormLabel>
<BFormInput
type="password"
aria-describedby="passwordHelpBlock"
/>
<BFormText>
Your password must be 8-20 characters long, contain letters and numbers,
and must not contain spaces, special characters, or emoji.
</BFormText>
</BFormControl>
</template>
Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.
<template>
<Row
gutter="3"
align-items="center"
>
<Col col="auto">
<BColFormLabel for="inputPassword6">
Password
</BColFormLabel>
</Col>
<Col col="auto">
<BFormInput
id="inputPassword6"
type="password"
aria-describedby="passwordHelpInline"
/>
</Col>
<Col col="auto">
<b-span>
<BFormText>be 8-20 characters long.</BFormText>
</b-span>
</Col>
</Row>
</template>
Disabled forms
Add the disabled attribute on an input to prevent user interactions and make it appear lighter.
<template>
<BFormInput
type="text"
placeholder="Disabled input here..."
disabled
/>
</template>
Add the disabled attribute to a <fieldset> to disable all the controls within.
Browsers treat all native form controls (FormInput, FormSelect, and Button elements) inside a` <fieldset disabled>as disabled, preventing both keyboard and mouse interactions on them.
However, if your form also includes custom button-like elements such as <a class="btn btn-*"></a>, these will only be given a style of pointer-events: none, meaning they are still focusable and operable using the keyboard.
In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.
<template>
<BForm>
<BFieldset disabled>
<BLegend>Disabled fieldset example</BLegend>
<BFormControl margin="b-3">
<BFormLabel>Disabled input</BFormLabel>
<BFormInput
type="text"
placeholder="Disabled input"
/>
</BFormControl>
<BFormControl margin="b-3">
<BFormLabel>Disabled select menu</BFormLabel>
<BFormSelect>
<option>Disabled select</option>
</BFormSelect>
</BFormControl>
<BFormControl margin="b-3">
<BFormCheck>
<BFormCheckInput
type="checkbox"
disabled
/>
<BFormCheckLabel>Can't check this</BFormCheckLabel>
</BFormCheck>
</BFormControl>
<b-button
type="submit"
color="primary"
>
Submit
</b-button>
</BFieldset>
</BForm>
</template>