Settings

A form-heavy account screen: a page header, tabs for each section, and settings rows pairing a label with a control — inputs, a textarea, a select, radio group, number input, slider, switch, and file upload. It showcases nearly every form control in one believable layout.

Preview full screen

Use it

This example is one self-contained file. Link the JLDS stylesheets and the behavior bundle from the CDN, then paste the markup. See Vanilla HTML for the full workflow.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/all.css">
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/all.js" defer></script>

curl -O https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/examples/settings.html

Components used

Page Header · Tabs · Field · Input · Textarea · Select · Radio Group · Number Input · Slider · Switch · File Upload · Avatar