Explore Our Templates 🚀
Form Element
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Input
The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup>, and use <FormLabel> for the label.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const InputBox = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isInvalid />
</Col>
</Row>
);
}
export default InputBox;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const InputBox = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isInvalid />
</Col>
</Row>
);
}
export default InputBox;<template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><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><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Select
Customize the native <select> with custom CSS that changes the element’s initial appearance.
<div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormSelect = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Select>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2}>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isValid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isInvalid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isInvalid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4}>
<Form.Select isInvalid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormSelect;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormSelect = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Select>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2}>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isValid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isInvalid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isInvalid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4}>
<Form.Select isInvalid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormSelect;<template>
<div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</template><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><div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>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.
<div class="row">
<div class="col-md-4 mb-3">
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4">
<textarea class="form-control is-invalid" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const TextArea = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Textarea" defaultValue={""} />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Readonly Textarea" readOnly defaultValue={"Readonly Textarea"} />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Disabled Textarea" disabled defaultValue={""} />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Textarea" isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Readonly Textarea" defaultValue="Readonly Textarea" isValid readOnly />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Disabled Textarea" isValid disabled />
</Col>
<Col md={4} className="mb-md-0 mb-3">
<Form.Control as="textarea" rows={3} placeholder="Textarea" isInvalid />
</Col>
<Col md={4} className="mb-md-0 mb-3">
<Form.Control as="textarea" rows={3} placeholder="Readonly Textarea" defaultValue="Readonly Textarea" isInvalid readOnly />
</Col>
<Col md={4}>
<Form.Control as="textarea" rows={3} placeholder="Disabled Textarea" isInvalid disabled />
</Col>
</Row>
);
}
export default TextArea;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const TextArea = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Textarea" defaultValue={""} />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Readonly Textarea" readOnly defaultValue={"Readonly Textarea"} />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Disabled Textarea" disabled defaultValue={""} />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Textarea" isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Readonly Textarea" defaultValue="Readonly Textarea" isValid readOnly />
</Col>
<Col md={4} className="mb-3">
<Form.Control as="textarea" rows={3} placeholder="Disabled Textarea" isValid disabled />
</Col>
<Col md={4} className="mb-md-0 mb-3">
<Form.Control as="textarea" rows={3} placeholder="Textarea" isInvalid />
</Col>
<Col md={4} className="mb-md-0 mb-3">
<Form.Control as="textarea" rows={3} placeholder="Readonly Textarea" defaultValue="Readonly Textarea" isInvalid readOnly />
</Col>
<Col md={4}>
<Form.Control as="textarea" rows={3} placeholder="Disabled Textarea" isInvalid disabled />
</Col>
</Row>
);
}
export default TextArea;<template>
<div class="row">
<div class="col-md-4 mb-3">
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4">
<textarea class="form-control is-invalid" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
</div>
</template><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><div class="row">
<div class="col-md-4 mb-3">
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4">
<textarea class="form-control is-invalid" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
</div>Sizing
Use size on <FormControl> and <Form.Select> to change the size of the input.
<div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormInputSize = () => {
return (
<Row>
<Col md={6}>
<Form.Control className='mb-3' size="lg" type="text" placeholder="Large text" />
<Form.Control className='mb-3' type="text" placeholder="Normal text" />
<Form.Control className='mb-3' size="sm" type="text" placeholder="Small text" />
</Col>
<Col md={6}>
<Form.Select className='mb-3' size="lg">
<option>Large select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select className='mb-3' >
<option>Default select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select size="sm">
<option>Small select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormInputSize;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormInputSize = () => {
return (
<Row>
<Col md={6}>
<Form.Control className='mb-3' size="lg" type="text" placeholder="Large text" />
<Form.Control className='mb-3' type="text" placeholder="Normal text" />
<Form.Control className='mb-3' size="sm" type="text" placeholder="Small text" />
</Col>
<Col md={6}>
<Form.Select className='mb-3' size="lg">
<option>Large select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select className='mb-3' >
<option>Default select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select size="sm">
<option>Small select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormInputSize;<template>
<div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</template><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><div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>Readonly plain text
If you want to have readonly elements in your form styled as plain text, use the plaintext prop on FormControls to remove the default form field styling and preserve the correct margin and padding.
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const ReadOnlyPlaintext = () => {
return (
<Form>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="6">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="6">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
);
}
export default ReadOnlyPlaintext;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const ReadOnlyPlaintext = () => {
return (
<Form>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="6">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="6">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
);
}
export default ReadOnlyPlaintext;<template>
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</template><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><div>
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</div>Input Shapes
Set different styles of input using .square-input, .rounded-input modifier classes.
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const ReadOnlyPlaintext = () => {
return (
<Form>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="6">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="6">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
);
}
export default ReadOnlyPlaintext;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const ReadOnlyPlaintext = () => {
return (
<Form>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="6">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="6">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
);
}
export default ReadOnlyPlaintext;<template>
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</template><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><div>
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</div>Help text
Block-level help text in forms can be created using <Form.Text>. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const ReadOnlyPlaintext = () => {
return (
<Form>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="6">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="6">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
);
}
export default ReadOnlyPlaintext;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const ReadOnlyPlaintext = () => {
return (
<Form>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="6">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-1" controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="6">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
);
}
export default ReadOnlyPlaintext;<template>
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</template><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><div>
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</div>File browser
A custom file browser with change and remove function.
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>import React from 'react';
import { Form } from 'react-bootstrap';
const FileInput = () => {
return (
<>
<Form.Group controlId="formFile" className="mb-3">
<Form.Label>Default file input example</Form.Label>
<Form.Control type="file" />
</Form.Group>
<Form.Group controlId="formFileMultiple" className="mb-3">
<Form.Label>Multiple files input example</Form.Label>
<Form.Control type="file" multiple />
</Form.Group>
<Form.Group controlId="formFileDisabled" className="mb-3">
<Form.Label>Disabled file input example</Form.Label>
<Form.Control type="file" disabled />
</Form.Group>
<Form.Group controlId="formFileSm" className="mb-3">
<Form.Label>Small file input example</Form.Label>
<Form.Control type="file" size="sm" />
</Form.Group>
<Form.Group controlId="formFileLg" className="mb-3">
<Form.Label>Large file input example</Form.Label>
<Form.Control type="file" size="lg" />
</Form.Group>
</>
);
}
export default FileInput;import React from 'react';
import { Form } from 'react-bootstrap';
const FileInput = () => {
return (
<>
<Form.Group controlId="formFile" className="mb-3">
<Form.Label>Default file input example</Form.Label>
<Form.Control type="file" />
</Form.Group>
<Form.Group controlId="formFileMultiple" className="mb-3">
<Form.Label>Multiple files input example</Form.Label>
<Form.Control type="file" multiple />
</Form.Group>
<Form.Group controlId="formFileDisabled" className="mb-3">
<Form.Label>Disabled file input example</Form.Label>
<Form.Control type="file" disabled />
</Form.Group>
<Form.Group controlId="formFileSm" className="mb-3">
<Form.Label>Small file input example</Form.Label>
<Form.Control type="file" size="sm" />
</Form.Group>
<Form.Group controlId="formFileLg" className="mb-3">
<Form.Label>Large file input example</Form.Label>
<Form.Control type="file" size="lg" />
</Form.Group>
</>
);
}
export default FileInput;<template>
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
</template><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><div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>Checkbox and radio
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Sizing
Inline
Without label
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const InputBox = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isInvalid />
</Col>
</Row>
);
}
export default InputBox;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const InputBox = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isValid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Input Box" isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Readonly" defaultValue="Readonly" readOnly isInvalid />
</Col>
<Col md={4} className="mb-3">
<Form.Control type="text" placeholder="Disabled" disabled isInvalid />
</Col>
</Row>
);
}
export default InputBox;<template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><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><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Checkbox and radio sizes
Use .form-check-lg, .form-check-sm
<div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormInputSize = () => {
return (
<Row>
<Col md={6}>
<Form.Control className='mb-3' size="lg" type="text" placeholder="Large text" />
<Form.Control className='mb-3' type="text" placeholder="Normal text" />
<Form.Control className='mb-3' size="sm" type="text" placeholder="Small text" />
</Col>
<Col md={6}>
<Form.Select className='mb-3' size="lg">
<option>Large select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select className='mb-3' >
<option>Default select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select size="sm">
<option>Small select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormInputSize;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormInputSize = () => {
return (
<Row>
<Col md={6}>
<Form.Control className='mb-3' size="lg" type="text" placeholder="Large text" />
<Form.Control className='mb-3' type="text" placeholder="Normal text" />
<Form.Control className='mb-3' size="sm" type="text" placeholder="Small text" />
</Col>
<Col md={6}>
<Form.Select className='mb-3' size="lg">
<option>Large select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select className='mb-3' >
<option>Default select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
<Form.Select size="sm">
<option>Small select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormInputSize;<template>
<div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</template><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><div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>Multiple select Menu
The multiple attribute is also supported.
<div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormSelect = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Select>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2}>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isValid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isInvalid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isInvalid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4}>
<Form.Select isInvalid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormSelect;import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
const FormSelect = () => {
return (
<Row>
<Col md={4} className="mb-3">
<Form.Select>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2}>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isValid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isValid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select isInvalid>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
<Col md={4} className="mb-3">
<Form.Select defaultValue={2} isInvalid>
<option disabled>Select</option>
<option value={1} disabled>One</option>
<option value={2} disabled>Readonly</option>
<option value={3} disabled>Three</option>
</Form.Select>
</Col>
<Col md={4}>
<Form.Select isInvalid disabled>
<option>Select</option>
<option value={1}>One</option>
<option value={2}>Two</option>
<option value={3}>Three</option>
</Form.Select>
</Col>
</Row>
);
}
export default FormSelect;<template>
<div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</template><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><div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>Switch
A switch has the markup of a custom checkbox but uses type="switch" to render a toggle switch. Switches also support the same customizable children as <FormCheck>.
Sizes
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Color
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Datalists
Datalists allow you to create a group of option's that can be accessed (and autocompleted) from within an input. These are similar to select elements, but come with more menu styling limitations and differences.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Range
Create custom <input type="range"> controls with <FormRange>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>