Additional utilities to make styling basic forms a piece of cake.
Sfumato provides a set of form field utilities that make styling basic forms faster and easier. They follow the original Tailwind CSS forms syntax. So if you're migrating from the Tailwind forms add-on they should "just work" with your existing forms.
Including these styles is OPTIONAL, and can be enabled in your source CSS file settings.
Start by styling a form element using one of the base styles: .form-input
, .form-textarea
, .form-select
, and .form-multiselect
. These apply to form elements <input>
, <select>
, and <textarea>
.
You can customize the style of form fields when using the forms feature. This can be done by changing various CSS custom properties. One example would be setting dark mode colors.
Below are the properties you can customize for various input fields, and their default values.
Input tags can be styled and used for various purposes, like simple text input, radio and checkbox choices, date pickers, buttons, and more.
Checkbox and radio inputs can easily be output individually or as horizontal or vertical lists.
Select tags can be styled and used for a flat or categorized list of choices.
Textarea tags can be styled and used for long form text input, like messages, biographies, and code snippets.