Styling
Easily style the various parts of your forms.
Formsnap doesn't ship with any styles by default, but it does provide a number of ways to style the various parts of your form. You can use the class prop to apply classes to the various components, or you can use the data attributes to style the components using CSS.
Data Attributes
Data attributes are applied to the various parts of your form so that you can easily style them using those attributes as selectors on a parent element or at the global level.
| Attribute | Description |
|---|---|
data-fs-error | Applied to all the formsnap elements within a field if the field has a validation error. Using this attribute, you can customize the appearance of the input, label, etc. when the field has a validation error. |
data-fs-control | Applied to the form control element used within a Control context. |
data-fs-label | Applied to the <label> element rendered by the Label component. |
data-fs-field-errors | Applied to the FieldErrors container <div> element. |
data-fs-field-error | Applied to the individually rendered <div> elements for each of the errors in the FieldErrors component. |
data-fs-description | Applied to the <div> element rendered by the Description component. |
data-fs-fieldset | Applied to the <fieldset> element rendered by the Fieldset component. |
data-fs-legend | Applied to the <legend> element rendered by the Legend component. |
Here's an example of how you might use these data attributes to style the various parts of your form:
[data-fs-error] {
color: red;
}
[data-fs-control] {
border: 1px solid #ccc;
}
/* ... */
CSS Frameworks
If you're using a CSS framework like TailwindCSS or UnoCSS, you can simply pass the class prop to the various components that render HTML elements under the hood. For example:
<script lang="ts">
import { Label } from "formsnap";
</script>
<form>
<!-- ... -->
<Label class="text-black hover:text-orange-500">First Name</Label>
<!-- ... -->
</form>