Forms
The forms.scss file is a template you can use to design your form elements. It provides a starting point for creating form styles that can be tailored to your project's needs.
If you're not using SASS, use the forms.css file.
Form control component #
The .form-control class applies the basic style to all form elements.
You can also use one of the following class modifiers:
| CSS Class | Description |
|---|---|
f{p}orm-control |
basic style of all form elements |
f{p}orm-control--error |
highlight form element if entered value is invalid |
f{p}orm-control--disabled |
disabled form elements |
Other form classes:
| CSS Class | Description |
|---|---|
f{p}orm-legend |
<legend> element |
f{p}orm-label |
<label> element |
Here's a demo of the default form elements style:
Themes #
Our smart color system ensures the default form elements look great in both light and dark mode, without requiring any additional code.
However, you can make changes based on the color theme in use if desired:
[data-theme=dark] .form-control {
/* ... */
}Custom radio/checkbox buttons #
To replace the native radio/checkbox buttons with custom ones, import the Radio Checkbox Buttons component.
Custom select #
To replace the native select element with a custom one, import the Custom Select component.
Form validator #
To validate fields in a form, check our Form Validator component.
