Form Element

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Input

Create various type inputs such as: text, password, number, url, email, search, range, date and more.

							
                                
<template>
    <BRow>
        <BCol md="4" class="mb-3">
            <BFormInput id="input-1" type="text" placeholder="Input Box" />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormInput id="input-2" type="text" placeholder="Readonly" readonly />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormInput id="input-3" type="text" placeholder="Disabled" disabled />
        </BCol>

        <BCol md="4" class="mb-3">
            <BFormInput id="input-4" type="text" :state="true" placeholder="Input Box" />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormInput id="input-5" type="text" :state="true" placeholder="Readonly" readonly />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormInput id="input-6" type="text" :state="true" placeholder="Disabled" disabled />
        </BCol>

        <BCol md="4" class="mb-3">
            <BFormInput id="input-7" type="text" :state="false" placeholder="Input Box" />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormInput id="input-8" type="text" :state="false" placeholder="Readonly" readonly />
        </BCol>
        <BCol md="4">
            <BFormInput id="input-9" type="text" :state="false" placeholder="Disabled" disabled />
        </BCol>
    </BRow>
</template>

Props	Value	Default	Description
`readonly`	boolean	`false`	When this prop is enabled, the user can view the input’s value but cannot modify it.
`Disabled`	boolean	`false`	When set to 'true', disables the component's functionality and places it in a disabled state
`state`	boolean \| null	`undefined`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state

Select

Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

							
                                
<template>
    <BRow>
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-1" model-value="selected">
                <BFormSelectOption value="selected">Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-2" model-value="readonly">
                <BFormSelectOption value="readonly" disabled>Readonly</BFormSelectOption>
                <BFormSelectOption value="1" disabled>One</BFormSelectOption>
                <BFormSelectOption value="2" disabled>Two</BFormSelectOption>
                <BFormSelectOption value="3" disabled>Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-1" model-value="selected" disabled>
                <BFormSelectOption value="selected">Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <!-- form select with valid state -->
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-4" :state="true" model-value="selected">
                <BFormSelectOption value="selected">Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-5" :state="true" model-value="readonly">
                <BFormSelectOption value="readonly" disabled>Readonly</BFormSelectOption>
                <BFormSelectOption value="1" disabled>One</BFormSelectOption>
                <BFormSelectOption value="2" disabled>Two</BFormSelectOption>
                <BFormSelectOption value="3" disabled>Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-6" :state="true" model-value="selected" disabled>
                <BFormSelectOption value="selected">Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <!-- form select with invalid state -->
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-7" :state="false" model-value="selected">
                <BFormSelectOption value="selected">Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormSelect id="select-8" :state="false" model-value="readonly">
                <BFormSelectOption value="readonly" disabled>Readonly</BFormSelectOption>
                <BFormSelectOption value="1" disabled>One</BFormSelectOption>
                <BFormSelectOption value="2" disabled>Two</BFormSelectOption>
                <BFormSelectOption value="3" disabled>Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
        <BCol md="4">
            <BFormSelect id="select-9" :state="false" model-value="selected" disabled>
                <BFormSelectOption value="selected">Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
    </BRow>
</template>

Textarea

Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

							
                                
<template>
    <BRow>
        <BCol md="4" class="mb-3">
            <BFormTextarea id="textarea-1" placeholder="Textarea" rows="3" />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormTextarea
                id="textarea-2"
                placeholder="Readonly Textarea"
                rows="3"
                readonly
            />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormTextarea
                id="textarea-3"
                placeholder="Disabled Textarea"
                rows="3"
                disabled
            />
        </BCol>

        <!-- textarea with valid state -->
        <BCol md="4" class="mb-3">
            <BFormTextarea
                id="textarea-4"
                :state="true"
                placeholder="Textarea"
                rows="3"
            />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormTextarea
                id="textarea-5"
                :state="true"
                placeholder="Readonly Textarea"
                rows="3"
                readonly
            />
        </BCol>
        <BCol md="4" class="mb-3">
            <BFormTextarea
                id="textarea-6"
                :state="true"
                placeholder="Disabled Textarea"
                rows="3"
                disabled
            />
        </BCol>

        <!-- textarea with invalid state -->
        <BCol md="4" class="mb-md-0 mb-3">
            <BFormTextarea
                id="textarea-7"
                :state="false"
                placeholder="Textarea"
                rows="3"
            />
        </BCol>
        <BCol md="4" class="mb-md-0 mb-3">
            <BFormTextarea
                id="textarea-8"
                :state="false"
                placeholder="Readonly Textarea"
                rows="3"
                readonly
            />
        </BCol>
        <BCol md="4">
            <BFormTextarea
                id="textarea-9"
                :state="false"
                placeholder="Disabled Textarea"
                rows="3"
                disabled
            />
        </BCol>
    </BRow>
</template>

Sizing

Set heights using the size prop to sm or lg for small or large respectively.

							
                                
<template>
    <BRow>
        <BCol md="6">
            <BFormInput
                id="input-large"
                size="lg"
                placeholder="Form Input Lg"
                class="mb-3"
            />
            <BFormInput id="input-default" placeholder="Default input" class="mb-3" />
            <BFormInput
                id="input-small"
                size="sm"
                placeholder="Form Input Lg"
                class="mb-md-0 mb-3"
            />
        </BCol>
        <BCol md="6">
            <BFormSelect id="select-lg" size="lg" model-value="selected" class="mb-3">
                <BFormSelectOption value="selected">Large Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
            <BFormSelect id="select-default" model-value="selected" class="mb-3">
                <BFormSelectOption value="selected">Default Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
            <BFormSelect id="select-sm" size="sm" model-value="selected">
                <BFormSelectOption value="selected">Small Select</BFormSelectOption>
                <BFormSelectOption value="1">One</BFormSelectOption>
                <BFormSelectOption value="2">Two</BFormSelectOption>
                <BFormSelectOption value="3">Three</BFormSelectOption>
            </BFormSelect>
        </BCol>
    </BRow>
</template>

Readonly plain text

If you want to have <BFormInput readonly> elements in your form styled as plain text, set the plaintext prop (no need to set readonly) to remove the default form field styling and preserve the correct margin and padding.

Password

							
                                
<template>
    <BContainer>
        <BRow class="mb-1">
            <BCol sm="2" class="col-form-label">
                <label for="staticEmail">Email</label>
            </BCol>
            <BCol sm="6">
                <BFormInput
                    id="staticEmail"
                    type="text"
                    model-value="email@example.com"
                    readonly
                    plaintext
                />
            </BCol>
        </BRow>
        <BRow class="mb-1">
            <BCol sm="2" class="col-form-label">
                <label for="inputPassword">Password</label>
            </BCol>
            <BCol sm="6">
                <BFormInput id="inputPassword" type="password" />
            </BCol>
        </BRow>
    </BContainer>
</template>

Input Shapes

Set different styles of input using .square-input, .rounded-input modifier classes.

							
                                
<template>
    <BCol>
        <BFormInput type="text" class="square-input mb-3" placeholder="Square Input" />
        <BFormInput type="text" class="rounded-input mb-3" placeholder="Square Input" />
    </BCol>
</template>

Help text

Display a block of help text below an input with the BFormText helper component. text is displayed with a muted color and slightly smaller font-size.

							
                                
<template>
    <BForm @submit.stop.prevent>
        <label for="text-password">Password</label>
        <BFormInput
            type="password"
            id="text-password"
            aria-describedby="password-help-block"
        />
        <BFormText id="password-help-block" class="text-muted">
            Your password must be 8-20 characters long, contain letters and numbers, and
            must not contain spaces, special characters, or emoji.
        </BFormText>
    </BForm>
</template>

File browser

File input control that supports single and multiple file modes.

Default file input exampleMultiple files input exampleDisabled file input exampleSmall file input exampleLarge file input example

							
                                
<template>
    <BCol>
        <BFormFile class="mb-3" label="Default file input example" />
        <BFormFile class="mb-3" label="Multiple files input example" multiple />
        <BFormFile class="mb-3" label="Disabled file input example" disabled />
        <BFormFile class="mb-3" label="Small file input example" size="sm" />
        <BFormFile class="mb-3" label="Large file input example" size="lg" />
    </BCol>
</template>

Checkbox and radio

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

							
                                
<template>
    <BContainer class="py-3">
        <BRow cols="5">
          <!-- checkboxes -->
          <BCol class="mb-1">
            <BFormCheckbox id="customCheck1"> Checkbox Static </BFormCheckbox>
          </BCol>
          <BCol class="mb-1">
            <BFormCheckbox id="customCheck2" checked> Checkbox Active </BFormCheckbox>
          </BCol>
          <BCol class="mb-1">
            <BFormCheckbox id="customCheck3" :state="true" checked>
              Checkbox Active
            </BFormCheckbox>
          </BCol>
          <BCol class="mb-1">
            <BFormCheckbox id="customCheck4" :state="false">
              Checkbox Active
            </BFormCheckbox>
          </BCol>
          <BCol class="mb-1">
            <BFormCheckbox id="customCheck5" disabled>Checkbox Disabled</BFormCheckbox>
          </BCol>

          <!-- radios -->
          <BCol class="mb-1">
            <BFormRadio v-model="radioSelected" name="customRadio" value="A">
              Radio Static
            </BFormRadio>
          </BCol>
          <BCol class="mb-1">
            <BFormRadio v-model="radioSelected" name="customRadio" value="B" checked>
              Radio Active
            </BFormRadio>
          </BCol>
          <BCol class="mb-1">
            <BFormRadio
              v-model="radioSelected"
              name="customRadio"
              value="C"
              :state="true"
            >
              Radio Active
            </BFormRadio>
          </BCol>
          <BCol class="mb-1">
            <BFormRadio
              v-model="radioSelected"
              name="customRadio"
              value="D"
              :state="false"
            >
              Radio Active
            </BFormRadio>
          </BCol>
          <BCol class="mb-1">
            <BFormRadio v-model="radioSelected" name="customRadio" value="E" disabled>
              Radio Disabled
            </BFormRadio>
          </BCol>
        </BRow>

        <div class="title mt-3"><span>Sizing</span></div>
        <BRow>
          <BCol sm="4" class="mb-1">
            <BFormCheckbox id="customCheck6" size="sm"> Checkbox Sm </BFormCheckbox>
          </BCol>
          <BCol sm="4" class="mb-1">
            <BFormCheckbox id="customCheck7"> Default Checkbox </BFormCheckbox>
          </BCol>
          <BCol sm="4" class="mb-1">
            <BFormCheckbox id="customCheck8" size="lg"> Checkbox Lg </BFormCheckbox>
          </BCol>
          <BCol sm="4" class="mb-1">
            <BFormRadio name="customRadio11" size="sm"> Radio Sm </BFormRadio>
          </BCol>
          <BCol sm="4" class="mb-1">
            <BFormRadio name="customRadio12"> Default Radio </BFormRadio>
          </BCol>
          <BCol sm="4" class="mb-1">
            <BFormRadio name="customRadio13" size="lg"> Radio Lg </BFormRadio>
          </BCol>
        </BRow>

        <div class="title mt-3">Inline</div>
        <BRow>
          <BCol class="mb-1">
            <BFormCheckbox id="inlineCheckbox1" value="option1" inline> 1 </BFormCheckbox>
            <BFormCheckbox id="inlineCheckbox2" value="option2" inline> 2 </BFormCheckbox>
            <BFormCheckbox id="inlineCheckbox3" value="option3" disabled inline>
              3
            </BFormCheckbox>
          </BCol>
        </BRow>

        <div class="title mt-3">Without label</div>
        <BRow>
          <BCol class="mb-1">
            <BFormCheckbox id="inlinewlable1" value="option1"></BFormCheckbox>
            <BFormRadio id="inlinewlable2" value="option2"></BFormRadio>
          </BCol>
        </BRow>

        <div class="title mt-3">Toggle buttons</div>
        <div class="hstack flex-wrap align-items-center gap-3">
          <BFormCheckboxGroup
            v-model="checkEx3Selected"
            :options="checkEx3Options"
            buttons
            button-variant="primary"
            name="buttons-1"
          />
          <BFormRadioGroup
            v-model="buttonsSelected"
            :options="buttonsOptions"
            button-variant="outline-primary"
            name="radios-btn-outline"
            buttons
          />
        </div>
    </BContainer>
</template>

<script setup>
    const radioSelected = ref("C");
    const checkEx3Selected = ref(["check1"]);
    const buttonsSelected = ref("radio1");

    const checkEx3Options = [
        { text: "Check 1", value: "check1" },
        { text: "Check 2", value: "check2" },
        { text: "Check 3", value: "check 3" },
        { text: "Check 4", value: "check4" },
    ];

    const buttonsOptions = [
        { text: "Radio 1", value: "radio1" },
        { text: "Radio 2", value: "radio2" },
        { text: "Radio 3 (disabled)", value: "radio3", disabled: true },
        { text: "Radio 4", value: "radio4" },
    ];
</script>

Checkbox and radio sizes

Use the size prop to control the size of the checkbox and radio. The default size is medium. Supported size values are sm (small) and lg (large).

							
                                
<template>
    <BRow>
        <BCol sm="4" class="mt-1">
            <BFormCheckbox size="sm">Checkbox Sm</BFormCheckbox>
        </BCol>
        <BCol sm="4" class="mb-1">
            <BFormCheckbox> Default Checkbox </BFormCheckbox>
        </BCol>
        <BCol sm="4" class="mb-1">
            <BFormCheckbox size="lg"> Checkbox Lg </BFormCheckbox>
        </BCol>
        <BCol sm="4" class="mb-sm-0 mb-1">
            <BFormRadio name="customRadioc1" size="sm"> Radio Sm </BFormRadio>
        </BCol>
        <BCol sm="4" class="mb-sm-0 mb-1">
            <BFormRadio name="customRadioc2"> Default Radio </BFormRadio>
        </BCol>
        <BCol sm="4" class="mb-1">
            <BFormRadio name="customRadioc3" size="lg"> Radio Lg </BFormRadio>
        </BCol>
    </BRow>
</template>

Multiple select Menu

Enable multiple select mode by setting the prop multiple, and control how many rows are displayed in the multiple select list-box by setting select-size to the number of rows to display. The default is to let the browser use its default (typically 4).

							
                                
<template>
  <BFormSelect v-model="exMultiSelected" :options="exMultiOptions" multiple :select-size="4" />
</template>

<script setup lang="ts">
const exMultiOptions = [
  {value: 'a', text: 'This is First option'},
  {value: 'b', text: 'Default Selected Option'},
  {value: 'c', text: 'This is another option'},
  {value: 'd', text: 'This one is disabled', disabled: true},
  {value: 'e', text: 'This is option e'},
  {value: 'f', text: 'This is option f'},
  {value: 'g', text: 'This is option g'},
]

const exMultiSelected = ref(['b'])
</script>

Switch

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

							
                                
<template>
    <BRow>
        <BCol>
            <BFormCheckbox switch> Switch Checkbox </BFormCheckbox>
            <BFormCheckbox switch disabled> Disabled Switch Checkbox </BFormCheckbox>

            <!-- sizes -->
            <div class="title mt-3">Sizes</div>
            <BFormCheckbox switch size="sm">Small</BFormCheckbox>
            <BFormCheckbox switch>Default</BFormCheckbox>
            <BFormCheckbox switch size="lg">Large</BFormCheckbox>
        </BCol>
    </BRow>
</template>

Color

Use the type="color" prop in BFormInput to create a color input.

Color picker

							
                                
<template>
    <BCol>
        <label for="exampleColorInput" class="form-label">Color picker</label>
        <BFormInput
            v-model="defaultColor"
            id="exampleColorInput"
            type="color"
            title="Choose your color"
        />
    </BCol>
</template>

<script setup>
    const defaultColor = ref("#563d7c");
</script>

Datalists

Datalists are a native HTML tag <datalist> that contains a list of <option> tags. By assigning an ID to the datalist tag, the list can be references from a text input by adding a list attribute.

Datalist example

							
                                
<template>
    <BCol>
        <label for="exampleDataList" class="form-label">Datalist example</label>
        <BFormInput list="datalistOptions" />

        <datalist id="datalistOptions">
            <option>San Francisco</option>
            <option>New York</option>
            <option>Seattle</option>
            <option>Los Angeles</option>
            <option>Chicago</option>
        </datalist>
    </BCol>
</template>

Range

Range inputs have implicit values for min and max of 0 and 100 respectively. You may specify new values for those using the min and max props.

Example range

Disabled range

							
                                
<template>
    <BCol>
        <div class="mb-3">
            <label for="customRange1" class="form-label">Example range</label>
            <BFormInput id="customRange1" type="range" min="0" max="100" />
        </div>
        <div>
            <label for="customRange2" class="form-label">Disabled range</label>
            <BFormInput id="customRange2" type="range" disabled />
        </div>
    </BCol>
</template>

Props	Value	Default	Description
`max`	Number or String	`undefined`	Defines the maximum value that the input can accept. This prop is primarily used with numeric or range inputs (type="number" or type="range").
`min`	Number or String	`undefined`	Sets the minimum value that the input can accept. Like the max prop, this is mainly used with numeric or range inputs (type="number" or type="range").
`step`	Number or String	`undefined`	Specifies the interval between legal numbers that the input can accept. This is particularly useful for numeric inputs, where you want to restrict the user to certain increments (e.g., only even numbers or increments of 0.5).

Input
Select
Textarea
Sizing
Readonly plain text
Input Shapes
Help text
File browser
Checkbox and radio
Card Groups
Multiple select Menu
Switch
Color
Datalists
Range