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.

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
<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.

<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., ~).

<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.

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
<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.

<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.

<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".

<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">