close

# Basic Forms

Customized Bootstrap forms to match Neptune's styles.

##### Basic Input

Here’s a quick example to demonstrate simple input field. Add `.light-focus` to `.form-control` to get lighter border on focus.

Email address
We'll never share your email with anyone else.

    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>

##### Rounded

Add `.form-control-rounded` to `.form-control` to make fields rounded.

    <input type="email" class="form-control form-control-rounded" aria-describedby="..." placeholder="...">
    <input type="password" class="form-control form-control-solid-bordered form-control-rounded" aria-describedby="..." placeholder="...">

##### Select

Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>`s due to browser limitations.

    <select class="form-select" aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>

##### Disabled

Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.

    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

##### Sizing

Set heights using classes like `.form-control-lg` and `.form-control-sm`.

    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
    <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

##### Radios

Default radio
Default checked radio

    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            Default radio
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
        <label class="form-check-label" for="flexRadioDefault2">
            Default checked radio
        </label>
    </div>

##### Switches

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

Default switch checkbox input
Checked switch checkbox input
Disabled switch checkbox input
Disabled checked switch checkbox input

    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
        <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
        <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
    </div>

##### Custom Styles

We offer some different custom styles for input fields to make your forms more beautiful.

    <input type="text" class="form-control form-control-solid-bordered" aria-describedby="..." placeholder="...">
    <input type="text" class="form-control form-control-solid" aria-describedby="..." placeholder="...">
    <input type="text" class="form-control form-control-material" aria-describedby="..." placeholder="...">
    <input type="text" class="form-control form-control-transparent" aria-describedby="..." placeholder="...">

##### Floating Labels

Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap’s textual form fields. A `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (e.g., `~`).

Email address
Password

    <input type="text" class="form-control form-control-solid-bordered" aria-describedby="..." placeholder="...">
    <input type="text" class="form-control form-control-solid" aria-describedby="..." placeholder="...">
    <input type="text" class="form-control form-control-material" aria-describedby="..." placeholder="...">
    <input type="text" class="form-control form-control-transparent" aria-describedby="..." placeholder="...">

##### Form Text

Block-level or inline-level form text can be created using `.form-text`.

Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
Password
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

    <label for="inputPassword5" class="form-label">Password</label>
    <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
        Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </div>

##### Checks

Default checkbox
Checked checkbox

    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
            Default checkbox
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="">
        <label class="form-check-label" for="flexCheckChecked">
            Checked checkbox
        </label>
    </div>

##### Inline Stacking

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

1
2
3 (disabled)

    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
        <label class="form-check-label" for="inlineCheckbox2">2</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
        <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
    </div>

##### Range

Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and 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.

Example range

    <label for="customRange1" class="form-label">Example range</label>
    <input type="range" class="form-range" id="customRange1">

By default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

Range with steps

    <label for="customRange3" class="form-label">Range with steps</label>
    <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">