Form controls
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
Example
'use client';
import Icon from '@/app/ui/Icon';
import { Col, Form, Row } from 'react-bootstrap';
export default function Example() {
return (
<Form>
<Row className="g-3 gx-gs">
<Col md="6">
<Form.Group className="form-control-wrap">
<Form.Label>Input text</Form.Label>
<Form.Control
type="text"
placeholder="Input text placeholder"
/>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Input with hint</Form.Label>
<Form.Group className="form-control-wrap">
<Form.Group className="form-control-hint">
<span>hint</span>
</Form.Group>
<Form.Control
type="text"
placeholder="Input text placeholde"
/>
</Form.Group>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Input with start icon</Form.Label>
<Form.Group className="form-control-wrap">
<Form.Group className="form-control-icon start">
<Icon icon="eye" className="icon" />
</Form.Group>
<Form.Control
type="text"
placeholder="Input text placeholder"
/>
</Form.Group>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Input with end icon</Form.Label>
<Form.Group className="form-control-wrap">
<Form.Group className="form-control-icon end">
<Icon icon="eye" className="icon" />
</Form.Group>
<Form.Control
type="text"
placeholder="Input text placeholder"
/>
</Form.Group>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Default Select</Form.Label>
<Form.Group className="form-control-wrap">
<Form.Select aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</Form.Group>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Default file input example</Form.Label>
<Form.Group className="form-control-wrap">
<Form.Control type="file" />
</Form.Group>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Multiple Select</Form.Label>
<Form.Select aria-label="Multiple select example" multiple>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</Form.Group>
</Col>
<Col md="6">
<Form.Group>
<Form.Label>Example textarea</Form.Label>
<Form.Group className="form-control-wrap">
<Form.Control
as="textarea"
rows={3}
placeholder="Textarea Placeholder"
/>
</Form.Group>
</Form.Group>
</Col>
</Row>
</Form>
);
}
Sizing
Set heights using props size='lg' or size='sm'
'use client';
import { Col, Form, Row } from 'react-bootstrap';
export default function Example() {
return (
<Form>
<Row className="g-3 align-items-center">
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Control type="text" placeholder="size='lg'" size="lg" />
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Control type="text" placeholder="Default input" />
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Control type="text" placeholder="size='sm'" size="sm" />
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Select aria-label="Default select example" size="lg">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Select aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Select aria-label="Default select example" size="sm">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Control type="file" placeholder="size='lg'" size="lg" />
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Control type="file" placeholder="Default input" />
</Form.Group>
</Col>
<Col lg="4">
<Form.Group className="form-control-wrap">
<Form.Control type="file" placeholder="size='sm'" size="sm" />
</Form.Group>
</Col>
</Row>
</Form>
);
}
Floating labels
Create beautifully simple form labels that float over your input fields.
'use client';
import { Col, Form, Row } from 'react-bootstrap';
export default function Example() {
return (
<Form>
<Row className="gx-gs gy-4">
<Col md="6">
<Form.Group className="form-floating">
<Form.Control
type="email"
placeholder="name@example.com"
id="floatingInput"
/>
<Form.Label>Email address</Form.Label>
</Form.Group>
</Col>
<Col md="6">
<Form.Group className="form-floating">
<Form.Select aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<Form.Label>Works with selects</Form.Label>
</Form.Group>
</Col>
<Col md="6">
<Form.Group className="form-floating">
<Form.Control
type="email"
placeholder="name@example.com"
id="floatingInputValue"
/>
<Form.Label>Input with value</Form.Label>
</Form.Group>
</Col>
<Col md="6">
<Form.Group className="form-floating">
<Form.Control
type="email"
placeholder="name@example.com"
id="floatingInputInvalid"
className="form-control is-invalid"
/>
<Form.Label>Invalid input</Form.Label>
</Form.Group>
</Col>
<Col lg="12">
<Form.Group className="form-floating">
<Form.Control
as="textarea"
rows={3}
id="floatingTextarea"
placeholder="Leave a comment here"
/>
<Form.Label>Comments</Form.Label>
</Form.Group>
</Col>
</Row>
</Form>
);
}
Checks and radios
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
'use client';
import { Col, Form, Row } from 'react-bootstrap';
export default function Example() {
return (
<Form>
<Row className="gy-3">
<Col lg="12">
<h6 className="overline-title">Checkboxes</h6>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="default-checkmark"
label="Default"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="checked-checkmark"
label="Checked"
checked
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="default-checkmark"
label="Disabled"
disabled
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="disabled-checked"
label="Disabled checked"
checked
disabled
/>
</Col>
<Col sm="12">
<h6 className="overline-title">Radios</h6>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="default-checkmark-2"
label="Default"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="checked-checkmark-2"
label="Checked"
checked
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="default-checkmark-2"
label="Disabled"
disabled
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="disabled-checked-2"
label="Disabled checked"
checked
disabled
/>
</Col>
<Col sm="12">
<h6 className="overline-title">Switches</h6>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="default-checkmark-3"
label="Default"
className="form-switch"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="checked-checkmark-3"
label="Checked"
checked
className="form-switch"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="default-checkmark-3"
label="Disabled"
disabled
className="form-switch"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="disabled-checked-3"
label="Disabled checked"
checked
disabled
className="form-switch"
/>
</Col>
</Row>
</Form>
);
}
Sizing
Set heights using props size='lg' or size='sm'
'use client';
import { Col, Form, Row } from 'react-bootstrap';
export default function Example() {
return (
<Form>
<Row className="gy-3">
<Col lg="12">
<h6 className="overline-title">Checkboxes</h6>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="CheckboxLabelSm"
label="Checkbox Label"
className="form-check-sm"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="CheckboxLabel"
label="Checkbox Label"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="CheckboxLabelLg"
label="Checkbox Label"
className="form-check-lg"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="checkbox"
id="CheckboxLabelXl"
label="Checkbox Label"
className="form-check-xl"
/>
</Col>
<Col sm="12">
<h6 className="overline-title">Radios</h6>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabelSm2"
label="Checkbox Label"
className="form-check-sm"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabel2"
label="Checkbox Label"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabelLg2"
label="Checkbox Label"
className="form-check-lg"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabelXl2"
label="Checkbox Label"
className="form-check-xl"
/>
</Col>
<Col sm="12">
<h6 className="overline-title">Switches</h6>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabelSm3"
label="Checkbox Label"
className="form-switch form-check-sm"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabel3"
label="Checkbox Label"
className="form-switch"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabelLg3"
label="Checkbox Label"
className="form-switch form-check-lg"
/>
</Col>
<Col lg="3" sm="6">
<Form.Check
type="radio"
id="CheckboxLabelXl3"
label="Checkbox Label"
className="form-switch form-check-xl"
/>
</Col>
</Row>
</Form>
);
}