Form Elements Examples

Live examples and demonstrations

Forms Overview

This example page demonstrates a modern set of form elements: field tiles, chip checkboxes, choice cards, custom select, toggle, slider, file tile, and a composed form layout.

These are designed to be:
  • Keyboard-accessible
  • Dark-theme friendly
  • Drop-in components for RSL layouts

New to Form Elements?

Get up and running in 5 minutes with our Quick Start Guide!

View Quick Start Guide

Download RSL Example Pack

Form Theming API (Data Attributes)

All components on this page are driven by CSS custom properties and can be themed with data attributes on any wrapper node (for example <form>, .rsl-select, .rsl-toggle, or the page .container).

Set colors and radius once and let your entire form inherit:

  • Field tiles: data-field-bg, data-field-border, data-field-radius, data-field-text, data-field-muted, data-field-focus, data-field-error, data-field-success
  • Chips: data-chip-bg, data-chip-border
  • Choice cards: data-choice-bg
  • Select: data-select-bg
  • Toggle: data-toggle-off, data-toggle-on
  • Slider: data-slider-track, data-slider-fill
  • File tile: data-file-bg

You can mix and match these attributes at different levels. Inner components will inherit values from the closest ancestor that sets them.

Code • Minimal API usage




    
    ...

Field Tile – Text Input

A tile-style text input with clear states, helper text, and focus treatment. Theme it by dropping data attributes on the form or a parent container.

We’ll never share your email.

API notes: Use data-field-bg, data-field-border, data-field-text, data-field-muted, and data-field-focus on any ancestor to control the tile background, border, text, helper color and focus glow.

Code • HTML



    

        
        

            
        

        
We’ll never share your email.

Checkbox Chips

Compact pill-style checkboxes that are fully clickable and keyboard accessible. The chip surface and active border are themeable via data attributes.

Notification channels

API notes: Use data-chip-bg and data-chip-border on a parent to change chip background and border. Active color uses data-field-focus when present.

Code • HTML



    

        Notification channels

Choice Cards (Radios)

Radio inputs upgraded into clickable cards for plan selection. The base tile uses the same data-field-* variables; you can override just the card body with data-choice-bg.

Choose a plan

API notes: Use data-choice-bg to set the resting background for cards. Focus and selected states use data-field-focus.

Code • HTML



    

        Choose a plan

Custom Select

A button-driven custom select with a floating options panel. Uses a hidden input for form submissions and is fully keyboard accessible.

API notes: Use data-select-bg for the button surface and data-field-focus for the open border and outline. Nested fields use the same data-field-* variables as text inputs.

Code • HTML

Toggle Switch

A compact toggle with label and helper text. The off and on colors can be tuned per-toggle.

API notes: Use data-toggle-off for the track/thumb at rest and data-toggle-on for the active color. You can set these on individual toggles or at the form level.

Code • HTML

Slider

A range slider with live value readout and customizable track/fill colors.

65%

API notes: Use data-slider-track to control the base track color and data-slider-fill for the thumb/fill color.

Code • HTML



    
    

        
        65%

File Upload Tile

A tile-style file input with drag-and-drop affordance and keyboard activation via Enter/Space.

API notes: Use data-file-bg for the tile background. Other field variables (border, text, muted) are inherited from ancestors.

Code • HTML

Composed Example Form

A small settings form combining multiple components.

Shown to collaborators.

Code • HTML



    

        

            

                
                

                    
                

                
Shown to collaborators.

Basic Form Elements (Lightweight Option)

RSL also includes a lightweight basic form system (form.css) for simpler use cases. These elements have minimal styling and work with the same form-validation.js as the modern form elements above.

50

Try submitting without filling required fields to see validation

Basic Form HTML • form.css

Drag & Drop Image Upload

Drag and drop images or click to browse. Previews appear below.

Drop images here or click to browse

When to Use Basic vs Modern Forms

Use Basic Forms (form.css) when:
  • You need lightweight, minimal styling
  • You want simple, traditional form elements
  • File size is a concern
  • You prefer browser-native select dropdowns
Use Modern Forms (form-elements.css) when:
  • You need a polished, dark-theme friendly UI
  • You want custom select, toggle, and slider controls
  • You're building a dashboard or app interface
  • You need data-attribute theming

Note: Both form systems work with form-validation.js. Add the input-required class to any input for automatic validation on submit.

Advanced Example: RSL App Setup Form

This final example shows how you can compose a more complete, production-style form for an app or workspace setup using only RSL form primitives, the slot layout grid, and the theming API.

Workspace details

Shown across navigation and invitations.

Optional; used for deep links and branding.

Used for billing receipts and security alerts.

12%

Use cases & plan

Primary use cases
Plan

♿ Accessibility Quick Notes