Form Elements - Quick Start Guide

Choose Your Form System

RSL provides two complete form systems. Pick the one that fits your project:

Modern Forms

Dark-themed, polished UI components

Field tiles with floating labels
Custom select, toggle, slider
Chip checkboxes & choice cards
Data-attribute theming

Files: form-elements.css

Basic Forms

Lightweight, minimal styling

Simple text inputs & textareas
Native select dropdowns
Custom radio & checkbox
Drag & drop file uploads

Files: form.css

⚠ Important: Don't mix both systems on the same form. Choose one and stick with it. Both work with the same form-validation.js script.

Modern Forms - 5-Minute Setup

1 Include Files

2 Create a Field Tile



    Email Address
    
        
    
    We'll never share your email.

✓ Done! You now have a styled, dark-themed input field with focus animations.

Field Tile Components

Class Reference

Class	Element	Description
`.rsl-field-tile`	`<div>`	Container for the entire field
`.rsl-field-label`	`<label>`	Small uppercase label
`.rsl-field-body`	`<div>`	Wraps input + optional icon
`.rsl-field-input`	`<input>`	The actual input element
`.rsl-field-helper`	`<p>`	Helper text below input
`.rsl-field-bar`	`<div>`	Animated bottom bar (decorative)

Data Attribute Theming

Apply these to any parent element (like <form>) to theme all fields inside:

Attribute	Controls	Default
`data-field-bg`	Field background color	#111418
`data-field-border`	Field border color	#2d3440
`data-field-text`	Input text color	#e5e7eb
`data-field-muted`	Label & helper text color	#9ca3af
`data-field-focus`	Focus glow color	#6e7bff
`data-field-error`	Error state color	#f97373



    
    
        Name

Checkbox Chips

Pill-style checkboxes that are fully clickable and keyboard accessible.

Class Reference

Class	Description
`.rsl-chip-row`	Container for chip group
`.rsl-chip`	Individual chip (label element)
`.rsl-chip-input`	Hidden checkbox input
`.rsl-chip-check`	Checkmark indicator
`.rsl-chip-label`	Chip text label

Choice Cards (Radio Buttons)

Card-style radio buttons perfect for pricing tiers or feature selection.



    
    
        
            Basic Plan
            $9/mo
        
        Perfect for individuals
    



    
    
        
            Pro Plan
            $29/mo
        
        For growing teams

Custom Select

Fully keyboard-accessible custom select dropdown (not native).



    
        Select an option
        ▼
    

    
        Option 1
        Option 2
        Option 3

✨ Keyboard Navigation: Arrow keys navigate options, Enter/Space selects, Escape closes.

Toggle Switch

iOS-style toggle switch with smooth animations.



    
    
        
    
    
        Email Notifications
        Receive updates via email

Range Slider

Custom-styled range slider with value display.

50%

✨ Auto-Update: The form-elements.js script automatically updates the value display as you drag.

File Upload Tile

Styled file upload with optional drag & drop preview.



    
        
            
        
        
            Upload a file
            Drag and drop or click to browse

✨ Enable Previews: Add data-enable-preview="true" and include drag-drop-image.js to show image thumbnails with delete buttons.

For Image Previews, Include:

Basic Forms - Lightweight Alternative

For simple projects that need minimal styling and smaller file sizes.

1 Include Files

2 Basic Form Example

Basic Forms Class Reference

Class	Element	Description
`.form`	`<form>`	Form container with flex layout
`.form-group`	`<div>`	Field container (label + input)
`.form-label`	`<label>`	Field label
`.form-input`	`<input>`	Text, email, number inputs
`.form-textarea`	`<textarea>`	Multi-line text input
`.form-select`	`<select>`	Native dropdown select
`.form-radio`	`<label>`	Custom radio button
`.form-checkbox`	`<label>`	Custom checkbox

Radio & Checkbox Example




    
    Basic Plan



    
    Pro Plan




    
    I agree to terms

Drag & Drop File Upload (Basic)



    
        
    
    Drop images here or click to browse

Form Validation

Works with both Modern and Basic forms. Add validation with a single class or attribute.

1 Include Validation Script

2 Mark Required Fields

Use either class="input-required" or data-required="true":

Validation Features

Feature	Description
Empty Field Check	Validates all text inputs, textareas, selects
Email Validation	Checks proper email format (@ and domain)
URL Validation	Validates URL structure for url inputs
Number Validation	Checks min/max ranges for number inputs
Radio/Checkbox Groups	Ensures at least one option selected
Error Styling	Adds `.input-error` class automatically
Error Message	Shows banner at top of form
Auto-Focus	Focuses first error field
Real-time Clearing	Removes error as user types

✓ Auto-configured! Just add the class and the script handles everything.

Troubleshooting

Field Tile Not Styled?

Check: form-elements.css is loaded
Check: All required classes present (.rsl-field-tile, .rsl-field-input)
Check: layout.js loaded before other scripts

Custom Select Not Working?

Check: form-elements.js is loaded
Check: data-open="false" attribute present
Check: Hidden input exists for form submission

Validation Not Firing?

Check: form-validation.js loaded
Check: class="input-required" or data-required="true" present
Check: Input is inside a <form> element

Image Previews Not Showing?

Check: drag-drop-image.js loaded
Check: data-enable-preview="true" on .rsl-file-tile
Check: form.css loaded for preview styles

Pro Tips

✨ Tip 1: Theme entire forms at once using data attributes on the <form> element

✨ Tip 2: Use .rsl-form-demo class for consistent spacing between fields

✨ Tip 3: Chip checkboxes work great for tags, skills, or interests

✨ Tip 4: Choice cards are perfect for pricing tiers or feature plans

⚠ Tip 5: Don't mix modern and basic form styles on the same page

✨ Tip 6: Add novalidate to forms to disable browser validation and use RSL validation only

Next Steps

See Examples

Open form-elements.html for live demos

Use Template

Copy from playground.html

Explore Grid

Use forms with RSL's grid system for layouts