Forms

Styled form controls with custom inputs, selects, checkboxes, switches, and validation. Part of the @thenewcss/forms addon package.

Installation

npm install @thenewcss/forms

Text Input

The .form-control class styles text inputs with consistent padding, borders, and focus states.

Preview

Email address

We'll never share your email.

<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="[email protected]">
<div class="form-text">We'll never share your email.</div>

Select

Use .form-select for a custom-styled dropdown with a chevron indicator.

Preview

<select class="form-select">
  <option>Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Checkboxes & Radios

Wrap checkbox/radio inputs in .form-check with.form-check-input for custom styling.

Preview

Checked checkbox

Unchecked checkbox

Selected radio

Other radio

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" checked>
  <label class="form-check-label" for="check1">Checked checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radio1" id="radio1" checked>
  <label class="form-check-label" for="radio1">Selected radio</label>
</div>

Switch

Add .form-switch to the check container for a toggle switch appearance.

Preview

Enabled

Disabled

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1" checked>
  <label class="form-check-label" for="switch1">Enabled</label>
</div>

Input Group

Use .input-group with .input-group-text to prepend or append text/icons to form controls.

Preview

.00

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Floating Labels

Wrap a .form-control and label in .form-floating for labels that float above the input on focus.

Preview

Email address

Password

<div class="form-floating">
  <input type="email" class="form-control" id="floatEmail" placeholder="[email protected]">
  <label for="floatEmail">Email address</label>
</div>

Validation

Add .is-valid or .is-invalid to form controls to show validation states with feedback messages.

Preview

Valid input

Looks good!

Invalid input

Please provide a valid value.

<input type="text" class="form-control is-valid" value="Correct value">
<div class="valid-feedback">Looks good!</div>

<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">Please provide a valid value.</div>

Sizes

Use .form-control-sm or .form-control-lg for smaller or larger inputs.

Preview

<input type="text" class="form-control form-control-sm" placeholder="Small input">
<input type="text" class="form-control" placeholder="Default input">
<input type="text" class="form-control form-control-lg" placeholder="Large input">

Class Reference

Base

Class	Description
`.form-control`	Full-width text input with padding, border, border-radius, and focus ring.
`.form-label`	Block label with margin-bottom and medium font weight.
`.form-text`	Small help text below inputs. Gray color, 0.75rem font-size.
`.form-select`	Custom-styled select dropdown with chevron indicator.

Checks & Switches

Class	Description
`.form-check`	Container for checkbox/radio with left padding for the input.
`.form-check-input`	Custom-styled checkbox or radio input. Blue when checked.
`.form-check-label`	Label for checkbox/radio with cursor pointer.
`.form-switch`	Modifier on .form-check for a toggle switch appearance.

Groups & Layout

Class	Description
`.input-group`	Flex container for prepend/append text around form controls.
`.input-group-text`	Text/icon addon inside an input group. Gray background.
`.form-floating`	Container for floating label pattern. Label floats on focus/filled.
`.form-range`	Custom-styled range slider input.

Validation & Sizes

Class	Description
`.is-valid`	Green border indicating valid input.
`.is-invalid`	Red border indicating invalid input.
`.valid-feedback`	Green feedback text, shown when sibling has .is-valid.
`.invalid-feedback`	Red feedback text, shown when sibling has .is-invalid.
`.form-control-sm`	Small input with reduced padding and font-size.
`.form-control-lg`	Large input with increased padding and font-size.