Documentation
Documentation - Form.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Form
Marssel offers a complete set of utility classes to style your forms, manage validation states, and create consistent and accessible user interfaces.
Basic inputs
Style your form fields with standard classes:
<input type="text" class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px]">
<textarea class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px]+min-h-[120px]"></textarea>
<select class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px]">
<option>Option 1</option>
<option>Option 2</option>
</select>Focus States
Add focus styles to improve user experience. You can use compact or standard syntax.
<input class="input---[w-[100%]+p-[12px]+border-[1px_solid_e0e0e0]+outline-[none]] border-[1px_solid_2563eb]:focus">Validation
Style validation states with the :valid and :invalid pseudo-classes.
Please enter a valid email address.
<input type="email"
class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] border-[1px_solid_10b981]:valid"
required>
<input type="email"
class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] border-[1px_solid_D41212]:invalid"
required>Disabled fields
Manage the appearance of disabled fields with the :disabled modifier.
<input class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] bg-[f5f5f5]:disabled c-[999999]:disabled cursor-[not-allowed]:disabled"
disabled>Checkbox and Radio
Example layout for selection groups.
<div class="col-[12]">
<div class="col-[row] gap-[24px]">
<div class="col-[12]">
<fieldset class="p-[16px] border-[1px_solid_e2e2e2] rounded-[4px]">
<legend class="font-weight-[500] c-[444] px-[8px]">Preferences</legend>
<label class="d-[flex] align-items-[center] gap-[8px] mb-[12px] cursor-[pointer]">
<input type="checkbox" class="w-[16px] h-[16px] cursor-[pointer]">
<span>Newsletter</span>
</label>
<label class="d-[flex] align-items-[center] gap-[8px] cursor-[pointer]">
<input type="checkbox" class="w-[16px] h-[16px] cursor-[pointer]">
<span>Notifications</span>
</label>
</fieldset>
</div>
<div class="col-[12]">
<fieldset class="p-[16px] border-[1px_solid_e2e2e2] rounded-[4px]">
<legend class="font-weight-[500] c-[444] px-[8px]">Payment method</legend>
<label class="d-[flex] align-items-[center] gap-[8px] mb-[12px] cursor-[pointer]">
<input type="radio" name="payment" class="w-[16px] h-[16px] cursor-[pointer]">
<span>Credit card</span>
</label>
<label class="d-[flex] align-items-[center] gap-[8px] cursor-[pointer]">
<input type="radio" name="payment" class="w-[16px] h-[16px] cursor-[pointer]">
<span>PayPal</span>
</label>
</fieldset>
</div>
</div>
</div>Input with icons
Add icons to the left or right of your inputs using a flexible container.
<div class="mb-[20px]">
<label class="d-[block] mb-[8px] font-weight-[600]">E-mail</label>
<div class="d-[flex] items-[center] border-[1px_solid_e0e0e0] rounded-[4px] px-[12px] border-color-[2563eb]:focus-within transition-[border-color_0.2s]">
<span class="icon-[envelope] icon-size-[20px] c-[5C6F8A]"></span>
<input type="email"
class="flex-[1] p-[12px] border-[none] outline-[none] bg-[transparent]"
placeholder="votre@email.com">
</div>
</div>
<div class="mb-[20px]">
<label class="d-[block] mb-[8px] font-weight-[600]">Password</label>
<div class="d-[flex] items-[center] border-[1px_solid_e0e0e0] rounded-[4px] px-[12px] border-color-[2563eb]:focus-within">
<input type="password"
class="flex-[1] p-[12px] border-[none] outline-[none] bg-[transparent]"
placeholder="Your password">
<span class="icon-[eye] icon-size-[20px] c-[5C6F8A] cursor-[pointer] c-[2563eb]:hover transition-[color_0.2s]"></span>
</div>
</div>Stacked fields (Vertical layout)
Vertical organization of fields with error management.
<form class="col-[row] gap-[24px]">
<div class="col-[12]">
<div class="d-[flex] flex-direction-[column] gap-[8px] mb-[24px]">
<label class="font-weight-[500] c-[444]">Full name</label>
<input type="text"
class="w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px] bg-[transparent] outline-[none] border-[007bff]:focus shadow-[0_0_0_3px_rgba(0,123,255,0.25)]:focus transition-[all_0.2s]">
<small class="c-[666] font-size-[12px]">Example: Jean Dupont</small>
</div>
<div class="d-[flex] flex-direction-[column] gap-[8px] mb-[24px]">
<label class="font-weight-[500] c-[dc3545]">Invalid email</label>
<input type="email"
class="w-[100%] p-[12px] border-[1px_solid_dc3545] rounded-[4px] outline-[none] c-[dc3545]"
value="email.invalide">
<small class="c-[dc3545] font-size-[12px]">Incorrect email format</small>
</div>
</div>
</form>Aligned fields (Horizontal layout)
Using the grid system to align fields on larger screens.
<form class="col-[row] gap-[24px]">
<div class="col-[12]">
<div class="col-[row] md--gutter-x-[20px] gap-y-[16px]">
<div class="col-[12] md--col-[6]">
<div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
<label class="font-weight-[500] c-[444] min-w-[80px]">Phone</label>
<div class="flex-[1]">
<input type="tel" class="w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px]">
</div>
</div>
</div>
<div class="col-[12] md--col-[6]">
<div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
<label class="font-weight-[500] c-[444] min-w-[80px]">E-mail</label>
<div class="flex-[1]">
<input type="email" class="w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px]">
</div>
</div>
</div>
</div>
</div>
<div class="col-[12]">
<div class="col-[row] md--gutter-x-[20px] gap-y-[16px]">
<div class="col-[12] md--col-[6]">
<div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
<label class="font-weight-[500] c-[444] min-w-[80px]">Country</label>
<select class="flex-[1] w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px] bg-[white]">
<option>France</option>
<option>Belgium</option>
</select>
</div>
</div>
<div class="col-[12] md--col-[6]">
<div class="d-[flex] flex-direction-[column] md--flex-direction-[row] md--align-items-[center] gap-[8px] md--gap-[16px]">
<label class="font-weight-[500] c-[444] min-w-[80px]">City</label>
<select class="flex-[1] w-[100%] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px] bg-[white]">
<option>Paris</option>
<option>Brussels</option>
</select>
</div>
</div>
</div>
</div>
</form>Group with button
Input with integrated action button.
<div class="mb-[24px]">
<label class="d-[block] mb-[8px] font-weight-[500] c-[444]">Promo code</label>
<div class="d-[flex] gap-[8px]">
<input type="text"
class="flex-[1] p-[12px] border-[1px_solid_e2e2e2] rounded-[4px]"
placeholder="Enter your code">
<button type="button"
class="bg-[007bff] c-[white] px-[20px] py-[12px] rounded-[4px] border-[none] bg-[0069d9]:hover cursor-[pointer] transition-[background_0.2s]">
Apply
</button>
</div>
</div>Complete form (Example)
A complete contact form combining different field types and states.
<form class="w-[100%] mx-[auto] p-[24px] border-[1px_solid_f0f0f0] rounded-[8px] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]">
<h3 class="mb-[24px] c-[333]">Contact us</h3>
<div class="mb-[20px]">
<label class="d-[block] mb-[8px] font-weight-[600] c-[333333]">Full name</label>
<input type="text"
class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] outline-[none] border-[2563eb]:focus transition-[border-color_0.2s]"
required>
</div>
<div class="mb-[20px]">
<label class="d-[block] mb-[8px] font-weight-[600] c-[333333]">E-mail</label>
<input type="email"
class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] outline-[none] border-[D41212]:invalid border-[2563eb]:focus"
required>
</div>
<div class="mb-[20px]">
<label class="d-[block] mb-[8px] font-weight-[600] c-[333333]">Message</label>
<textarea class="w-[100%] p-[12px] border-[1px_solid_e0e0e0] rounded-[4px] outline-[none] border-[2563eb]:focus min-h-[100px]"
required></textarea>
</div>
<div class="form-group mb-[24px]">
<label class="font-weight-[500] c-[444]">Favorite color</label>
<div class="color-picker---d-[flex] align-items-[center] gap-[12px]">
<input type="color" class="w-[50px] h-[50px] border-[2px_solid_e2e2e2] rounded-[8px] overflow-[hidden] cursor-[pointer]">
</div>
<small class="helper-text">Click to choose a color</small>
</div>
<div class="mb-[24px]">
<label class="d-[flex] items-[center] gap-[8px] cursor-[pointer]">
<input type="checkbox" class="w-[18px] h-[18px] cursor-[pointer]">
<span class="c-[333333] font-size-[14px]">I accept the terms of use</span>
</label>
</div>
<button type="submit"
class="w-[100%] p-[12px_24px] bg-[2563eb] c-[ffffff] border-[none] rounded-[4px] cursor-[pointer] bg-[1d4ed8]:hover transform-[scale(1.02)]:active transition-[all_0.2s]">
Send message
</button>
</form>