Form control

Text inputs, textareas and selects with sizes, states and validation styles.

Bootstrap’s form control docs describe the markup and CSS.

Example

Add bsFormControl to an <input>, <textarea> or <select>. Use the right type, such as email, so browsers offer the matching keyboard and autofill.

Email address

We’ll never share your email with anyone else.

HTML

<div bsFormField>
  <label bsFormLabel>Email address</label>
  <input type="email" bsFormControl placeholder="name@example.com" />
  <div bsFormText>We’ll never share your email with anyone else.</div>
</div>

With Angular forms

bsFormControl doesn’t replace Angular’s value accessors, so [formControl], formControlName, [(ngModel)] and [formField] work as on any native input. The control’s state sets .is-invalid once it is touched.

Username

Usernames have at least 3 characters.

Value:

<div bsFormField>
  <label bsFormLabel>Username</label>
  <input bsFormControl [formControl]="username" autocomplete="username" />
  <div bsInvalidFeedback>Usernames have at least 3 characters.</div>
</div>
<p class="mt-3 mb-0">
  Value: <code>{{ username.value }}</code>
</p>

Textarea

Set the height with the rows attribute.

Example textarea

Taller textarea

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <label bsFormLabel>Example textarea</label>
    <textarea bsFormControl></textarea>
  </div>
  <div bsFormField>
    <label bsFormLabel>Taller textarea</label>
    <textarea bsFormControl rows="4"></textarea>
  </div>
</div>

Select

Bootstrap 6 styles <select> with .form-control too, including multiple and size.

Example select

Multiple select

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <label bsFormLabel>Example select</label>
    <select bsFormControl>
      <option>Choose one…</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div bsFormField>
    <label bsFormLabel>Multiple select</label>
    <select bsFormControl multiple>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>

Sizes

Set controlSize to sm or lg. The input is not called size because that is a native attribute of inputs and selects.

Small input

Default input

Large select

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <label bsFormLabel>Small input</label>
    <input bsFormControl controlSize="sm" placeholder="Small input" />
  </div>
  <div bsFormField>
    <label bsFormLabel>Default input</label>
    <input bsFormControl placeholder="Default input" />
  </div>
  <div bsFormField>
    <label bsFormLabel>Large select</label>
    <select bsFormControl controlSize="lg">
      <option>Open this select menu</option>
      <option value="1">One</option>
    </select>
  </div>
</div>

Disabled and readonly

Add disabled to gray out a control, or readonly to prevent changes while keeping it focusable.

HTML

<div class="vstack gap-3">
  <input bsFormControl placeholder="Disabled input" aria-label="Disabled input example" disabled />
  <textarea bsFormControl rows="2" aria-label="Disabled textarea" disabled>Disabled</textarea>
  <input bsFormControl value="Readonly input here…" aria-label="Readonly input example" readonly />
</div>

Readonly plain text

Use bsFormControl="plaintext" on a readonly input to style it as text, keeping the control’s margin and padding.

Password

HTML

<div class="row mb-3">
  <label for="staticEmail" class="sm:col-2 col-form-label">Email</label>
  <div class="sm:col-10">
    <input bsFormControl="plaintext" id="staticEmail" readonly value="email@example.com" />
  </div>
</div>
<div class="row">
  <label for="plaintextPassword" class="sm:col-2 col-form-label">Password</label>
  <div class="sm:col-10">
    <input type="password" bsFormControl id="plaintextPassword" autocomplete="current-password" />
  </div>
</div>

Color

Inputs with type="color" get .form-control-color automatically.

Color picker

HTML

<div bsFormField>
  <label bsFormLabel>Color picker</label>
  <input type="color" bsFormControl value="#631aff" />
</div>

Datalists

Link a <datalist> with list for suggestions. Add caret to show a caret like a select.

City

HTML

<div bsFormField>
  <label bsFormLabel>City</label>
  <input bsFormControl caret list="datalistCities" placeholder="Type to search…" />
  <datalist id="datalistCities">
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Seattle"></option>
    <option value="Los Angeles"></option>
    <option value="Chicago"></option>
  </datalist>
</div>

Date and time

Date and time inputs need no extra options. Their appearance depends on the browser. For a consistent calendar across browsers, use Datepicker.

HTML

<div class="vstack gap-3">
  <input type="datetime-local" bsFormControl aria-label="Date and time" value="2026-02-24T13:00" />
  <input type="date" bsFormControl aria-label="Date" value="2026-02-24" />
  <input type="time" bsFormControl aria-label="Time" value="13:00" />
</div>

File

File inputs are styled through ::file-selector-button.

Default file input

Multiple files, small

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <label bsFormLabel>Default file input</label>
    <input type="file" bsFormControl />
  </div>
  <div bsFormField>
    <label bsFormLabel>Multiple files, small</label>
    <input type="file" bsFormControl controlSize="sm" multiple />
  </div>
</div>

Ghost

bsFormControl="ghost" removes all input styles, for composites such as search bars where a wrapper draws the border. Give the wrapper a visible focus style with :focus-within.

HTML

<div bsFormField>
  <label bsFormLabel>Search</label>
  <div class="d-flex align-items-center gap-3 p-3 border rounded-3">
    <svg width="16" height="16" fill="currentColor" aria-hidden="true" viewBox="0 0 16 16">
      <path
        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
    </svg>
    <input type="search" bsFormControl="ghost" placeholder="Search docs" />
  </div>
</div>

API

BsFormControl

Selector: input[bsFormControl], textarea[bsFormControl], select[bsFormControl] · Exported as: bsFormControl

Inputs

Name	Type	Default	Description
`bsFormControl`	`'control' \| 'plaintext' \| 'ghost' \| ''`	`'control'`	Style of the control. An empty value means control.
`controlSize`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the control.
`caret`	`boolean`	`false`	Shows a caret, for example on an input with a datalist.
`id`	`string`	`generated`	Element id. Generated when not set, and used for the field’s label.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles. auto follows the bound Angular form control.

BsControl

Selector: [bsControl] · Exported as: bsControl

Inputs

Name	Type	Default	Description
`id`	`string`	`generated`	Element id. Generated when not set, and used for the field’s label.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles. auto follows the bound Angular form control.

Methods

Name	Type	Description
`state`	`Signal<'valid' \| 'invalid' \| null>`	The validation state the control shows.