SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

📝 Form fields

💠 Examples

💻 HTML Code

🛠️ How use validate

Add data-js="validate" to the form, apply required or any HTML constraints to the fields, and wrap each label–input pair in .form-control. Use novalidate if you want to disable native browser popups and rely entirely on the component's validation UI.

📏 Input sizes

These classes apply only to input wrappers. Each one provides its own size and spacing.
.form-control
.form-control-sm
.form-control-md
.form-control-lg

📍 Inline Forms

By default, labels sit above inputs. Use .form-inline on the same container as .form-control to place the label and field side by side while keeping consistent spacing.

⚙️ Variables CSS

Variable Description
--form-control-gap Gap between form controls.
--form-control-height Default height of form controls.
--form-control-height-lg Height for large-sized form controls.
--form-control-height-md Height for medium-sized form controls.
--form-control-height-sm Height for small-sized form controls.
--input-bg-color Background color of the input.
--input-border-color Border color of the input.
--input-border-color-invalid Border color for invalid input state.
--input-border-color-valid Border color for valid input state.
--input-border-radius Corner radius of inputs.
--input-border-style Border style applied to inputs.
--input-border-width Thickness of the input border.
--input-box-shadow-focus Focus shadow applied when the input is active.
--input-box-shadow-invalid Shadow applied when the input state is invalid.
--input-box-shadow-valid Shadow applied when the input state is valid.
--input-checbox-size Default size of checkboxes.
--input-checbox-size-lg Size for large checkboxes.
--input-checbox-size-md Size for medium checkboxes.
--input-checbox-size-sm Size for small checkboxes.
--input-height Default height of inputs.
--input-height-lg Height for large-sized inputs.
--input-height-md Height for medium-sized inputs.
--input-height-sm Height for small-sized inputs.
--input-icon-invalid-svg SVG icon displayed for invalid input state.
--input-icon-select-arrow-svg Arrow icon for select elements.
--input-icon-valid-svg SVG icon displayed for valid input state.
--input-padding Horizontal padding inside inputs.
--input-radio-size Default size of radio buttons.
--input-radio-size-lg Size for large radio buttons.
--input-radio-size-md Size for medium radio buttons.
--input-radio-size-sm Size for small radio buttons.
--input-range-bar-height Height of the input range bar.
--input-range-bar-height-lg Height of the input range bar (large).
--input-range-bar-height-md Height of the input range bar (medium).
--input-range-bar-height-sm Height of the input range bar (small).
--input-range-button-size Size of the input range handle button.
--input-range-button-size-lg Size of the handle button (large).
--input-range-button-size-md Size of the handle button (medium).
--input-range-button-size-sm Size of the handle button (small).
--input-switch-bg-color Background color of toggle switches.
--input-switch-height Default height of toggle switches.
--input-switch-height-lg Height of toggle switches (large).
--input-switch-height-md Height of toggle switches (medium).
--input-switch-height-sm Height of toggle switches (small).
--textarea-padding Padding inside textarea elements.