|$ curl https://forge-ai.dev/api/markdown?path=docs/components/inputs
$cat docs/inputs-&-controls.md
updated Recently·22 min read·published
Inputs & Controls
Introduction
Inputs and controls are the primary way users communicate with applications. This guide covers production-ready patterns for text fields, input groups, selects, toggles, checkboxes, radios, sliders, file uploads, and star ratings — implemented in vanilla HTML/CSS, Tailwind CSS, and Bootstrap with a dark terminal theme.
ℹ
info
Pair every input with a <label> (explicit via htmlFor / for) and use aria-describedby to link helper text or errors.
Text Fields
Standard inputs, textareas, helper text, and invalid states.
text-fields
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="field"> |
| 3 | <label for="email"> |
| 4 | Email address |
| 5 | </label> |
| 6 | <input type="email" id="email" placeholder="you@example.com" /> |
| 7 | <span class="hint"> |
| 8 | We'll never share your email. |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="field error"> |
| 12 | <label for="username"> |
| 13 | Username |
| 14 | </label> |
| 15 | <input type="text" id="username" value="forge learn" /> |
| 16 | <span class="hint"> |
| 17 | Usernames cannot contain spaces. |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="field"> |
| 21 | <label for="bio"> |
| 22 | Bio |
| 23 | </label> |
| 24 | <textarea id="bio" rows="3" placeholder="Tell us about yourself..."> |
| 25 | </textarea> |
| 26 | </div> |
| 27 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:360px; |
| 14 | margin:16px auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:16px |
| 18 | } |
| 19 | .field { |
| 20 | display:flex; |
| 21 | flex-direction:column; |
| 22 | gap:6px |
| 23 | } |
| 24 | .field label { |
| 25 | font-size:12px; |
| 26 | color:#E0E0E0; |
| 27 | font-weight:500 |
| 28 | } |
| 29 | .field input, |
| 30 | .field textarea { |
| 31 | padding:10px 12px; |
| 32 | border-radius:8px; |
| 33 | border:1.5px solid #2A2A3E; |
| 34 | background:#0A0A0A; |
| 35 | color:#E0E0E0; |
| 36 | font-size:13px; |
| 37 | outline:none; |
| 38 | transition:border-color .2s, |
| 39 | box-shadow .2s; |
| 40 | font-family:inherit |
| 41 | } |
| 42 | .field input:focus, |
| 43 | .field textarea:focus { |
| 44 | border-color:#00FF41; |
| 45 | box-shadow:0 0 0 3px rgba(0, |
| 46 | 255, |
| 47 | 65, |
| 48 | .1) |
| 49 | } |
| 50 | .field input::placeholder, |
| 51 | .field textarea::placeholder { |
| 52 | color:#525252 |
| 53 | } |
| 54 | .field.error input { |
| 55 | border-color:#EF4444 |
| 56 | } |
| 57 | .field.error input:focus { |
| 58 | box-shadow:0 0 0 3px rgba(239, |
| 59 | 68, |
| 60 | 68, |
| 61 | .15) |
| 62 | } |
| 63 | .field.error .hint { |
| 64 | color:#EF4444 |
| 65 | } |
| 66 | .hint { |
| 67 | font-size:11px; |
| 68 | color:#808080 |
| 69 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto flex flex-col gap-4 p-6 bg-[#0A0A0A] font-sans"> |
| 2 | <div class="flex flex-col gap-1.5"> |
| 3 | <label for="email" class="text-xs text-[#E0E0E0] font-medium"> |
| 4 | Email address |
| 5 | </label> |
| 6 | <input id="email" type="email" placeholder="you@example.com" class="px-3 py-2.5 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] text-[13px] text-[#E0E0E0] placeholder:text-[#525252] outline-none focus:border-[#00FF41] focus:ring-[3px] focus:ring-[#00FF41]/10 transition-all" /> |
| 7 | <span class="text-[11px] text-[#808080]"> |
| 8 | We'll never share your email. |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="flex flex-col gap-1.5"> |
| 12 | <label for="username" class="text-xs text-[#E0E0E0] font-medium"> |
| 13 | Username |
| 14 | </label> |
| 15 | <input id="username" type="text" value="forge learn" class="px-3 py-2.5 rounded-lg border-[1.5px] border-[#EF4444] bg-[#0A0A0A] text-[13px] text-[#E0E0E0] outline-none focus:ring-[3px] focus:ring-[#EF4444]/15 transition-all" /> |
| 16 | <span class="text-[11px] text-[#EF4444]"> |
| 17 | Usernames cannot contain spaces. |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="flex flex-col gap-1.5"> |
| 21 | <label for="bio" class="text-xs text-[#E0E0E0] font-medium"> |
| 22 | Bio |
| 23 | </label> |
| 24 | <textarea id="bio" rows="3" placeholder="Tell us about yourself..." class="px-3 py-2.5 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] text-[13px] text-[#E0E0E0] placeholder:text-[#525252] outline-none focus:border-[#00FF41] focus:ring-[3px] focus:ring-[#00FF41]/10 transition-all resize-none"> |
| 25 | </textarea> |
| 26 | </div> |
| 27 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-secondary:#808080;--bs-border-color:#2A2A3E;--bs-form-control-bg:#0A0A0A;--bs-form-control-color:#E0E0E0;--bs-form-control-border-color:#2A2A3E;--bs-form-control-focus-border-color:#00FF41;--bs-form-control-focus-box-shadow:0 0 0 0.25rem rgba(0,255,65,.25);--bs-form-feedback-invalid-color:#EF4444} |
| 3 | </style> |
| 4 | <div class="container" style="max-width:360px"> |
| 5 | <div class="mb-3"> |
| 6 | <label for="email" class="form-label" style="color:#E0E0E0"> |
| 7 | Email address |
| 8 | </label> |
| 9 | <input id="email" type="email" class="form-control" placeholder="you@example.com" /> |
| 10 | <div class="form-text"> |
| 11 | We'll never share your email. |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="mb-3"> |
| 15 | <label for="username" class="form-label" style="color:#E0E0E0"> |
| 16 | Username |
| 17 | </label> |
| 18 | <input id="username" type="text" class="form-control is-invalid" value="forge learn" /> |
| 19 | <div class="invalid-feedback"> |
| 20 | Usernames cannot contain spaces. |
| 21 | </div> |
| 22 | </div> |
| 23 | <div class="mb-3"> |
| 24 | <label for="bio" class="form-label" style="color:#E0E0E0"> |
| 25 | Bio |
| 26 | </label> |
| 27 | <textarea id="bio" rows="3" class="form-control" placeholder="Tell us about yourself..."> |
| 28 | </textarea> |
| 29 | </div> |
| 30 | </div> |
Input Groups
Inputs with attached icons, currency prefixes, suffix text, and action buttons.
input-groups
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="i-group"> |
| 3 | <span class="i-prefix"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <circle cx="11" cy="11" r="8"/> |
| 6 | <line x1="21" y1="21" x2="16.65" y2="16.65"/> |
| 7 | </svg> |
| 8 | </span> |
| 9 | <input type="text" placeholder="Search docs..." /> |
| 10 | </div> |
| 11 | <div class="i-group"> |
| 12 | <span class="i-prefix"> |
| 13 | $ |
| 14 | </span> |
| 15 | <input type="text" placeholder="0.00" /> |
| 16 | <button> |
| 17 | Pay |
| 18 | </button> |
| 19 | </div> |
| 20 | <div class="i-group"> |
| 21 | <input type="text" placeholder="forgelearn" /> |
| 22 | <span class="i-suffix"> |
| 23 | .dev |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:12px; |
| 16 | max-width:360px; |
| 17 | margin:16px auto |
| 18 | } |
| 19 | .i-group { |
| 20 | display:flex; |
| 21 | align-items:stretch; |
| 22 | border-radius:8px; |
| 23 | overflow:hidden; |
| 24 | border:1.5px solid #2A2A3E; |
| 25 | background:#0A0A0A; |
| 26 | transition:border-color .2s, |
| 27 | box-shadow .2s |
| 28 | } |
| 29 | .i-group:focus-within { |
| 30 | border-color:#00FF41; |
| 31 | box-shadow:0 0 0 3px rgba(0, |
| 32 | 255, |
| 33 | 65, |
| 34 | .1) |
| 35 | } |
| 36 | .i-group input { |
| 37 | flex:1; |
| 38 | padding:10px 12px; |
| 39 | font-size:13px; |
| 40 | font-family:inherit; |
| 41 | background:transparent; |
| 42 | border:none; |
| 43 | color:#E0E0E0; |
| 44 | outline:none |
| 45 | } |
| 46 | .i-group input::placeholder { |
| 47 | color:#525252 |
| 48 | } |
| 49 | .i-prefix, |
| 50 | .i-suffix { |
| 51 | display:flex; |
| 52 | align-items:center; |
| 53 | padding:0 12px; |
| 54 | font-size:13px; |
| 55 | color:#808080; |
| 56 | background:rgba(255, |
| 57 | 255, |
| 58 | 255, |
| 59 | .03); |
| 60 | white-space:nowrap |
| 61 | } |
| 62 | .i-prefix { |
| 63 | border-right:1px solid #2A2A3E |
| 64 | } |
| 65 | .i-suffix { |
| 66 | border-left:1px solid #2A2A3E |
| 67 | } |
| 68 | .i-group button { |
| 69 | padding:0 16px; |
| 70 | font-size:12px; |
| 71 | font-weight:600; |
| 72 | border:none; |
| 73 | background:#00FF41; |
| 74 | color:#0A0A0A; |
| 75 | cursor:pointer; |
| 76 | transition:background .2s |
| 77 | } |
| 78 | .i-group button:hover { |
| 79 | background:#00E63A |
| 80 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto flex flex-col gap-3 p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-stretch rounded-lg overflow-hidden border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] focus-within:border-[#00FF41] focus-within:ring-[3px] focus-within:ring-[#00FF41]/10 transition-all"> |
| 3 | <span class="flex items-center px-3 text-[#808080] bg-white/[0.03] border-r border-[#2A2A3E]"> |
| 4 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <circle cx="11" cy="11" r="8"/> |
| 6 | <line x1="21" y1="21" x2="16.65" y2="16.65"/> |
| 7 | </svg> |
| 8 | </span> |
| 9 | <input type="text" placeholder="Search docs..." class="flex-1 px-3 py-2.5 bg-transparent text-[13px] text-[#E0E0E0] placeholder:text-[#525252] outline-none" /> |
| 10 | </div> |
| 11 | <div class="flex items-stretch rounded-lg overflow-hidden border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] focus-within:border-[#00FF41] focus-within:ring-[3px] focus-within:ring-[#00FF41]/10 transition-all"> |
| 12 | <span class="flex items-center px-3 text-[#808080] bg-white/[0.03] border-r border-[#2A2A3E] text-[13px]"> |
| 13 | $ |
| 14 | </span> |
| 15 | <input type="text" placeholder="0.00" class="flex-1 px-3 py-2.5 bg-transparent text-[13px] text-[#E0E0E0] placeholder:text-[#525252] outline-none" /> |
| 16 | <button class="px-4 text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-colors"> |
| 17 | Pay |
| 18 | </button> |
| 19 | </div> |
| 20 | <div class="flex items-stretch rounded-lg overflow-hidden border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] focus-within:border-[#00FF41] focus-within:ring-[3px] focus-within:ring-[#00FF41]/10 transition-all"> |
| 21 | <input type="text" placeholder="forgelearn" class="flex-1 px-3 py-2.5 bg-transparent text-[13px] text-[#E0E0E0] placeholder:text-[#525252] outline-none" /> |
| 22 | <span class="flex items-center px-3 text-[#808080] bg-white/[0.03] border-l border-[#2A2A3E] text-[13px]"> |
| 23 | .dev |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-border-color:#2A2A3E;--bs-form-control-bg:#0A0A0A;--bs-form-control-color:#E0E0E0;--bs-form-control-border-color:#2A2A3E;--bs-form-control-focus-border-color:#00FF41;--bs-form-control-focus-box-shadow:0 0 0 0.25rem rgba(0,255,65,.25)} |
| 3 | </style> |
| 4 | <div class="container" style="max-width:360px"> |
| 5 | <div class="input-group mb-3"> |
| 6 | <span class="input-group-text" style="color:#808080;background:#111;border-color:#2A2A3E"> |
| 7 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 8 | <circle cx="11" cy="11" r="8"/> |
| 9 | <line x1="21" y1="21" x2="16.65" y2="16.65"/> |
| 10 | </svg> |
| 11 | </span> |
| 12 | <input type="text" class="form-control" placeholder="Search docs..." /> |
| 13 | </div> |
| 14 | <div class="input-group mb-3"> |
| 15 | <span class="input-group-text" style="color:#808080;background:#111;border-color:#2A2A3E"> |
| 16 | $ |
| 17 | </span> |
| 18 | <input type="text" class="form-control" placeholder="0.00" /> |
| 19 | <button class="btn btn-success fw-semibold" type="button" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 20 | Pay |
| 21 | </button> |
| 22 | </div> |
| 23 | <div class="input-group"> |
| 24 | <input type="text" class="form-control" placeholder="forgelearn" /> |
| 25 | <span class="input-group-text" style="color:#808080;background:#111;border-color:#2A2A3E"> |
| 26 | .dev |
| 27 | </span> |
| 28 | </div> |
| 29 | </div> |
Select & Dropdown
Custom selects with a chevron indicator, including a disabled state.
select
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="field"> |
| 3 | <label for="role"> |
| 4 | Role |
| 5 | </label> |
| 6 | <div class="select-wrap"> |
| 7 | <select id="role"> |
| 8 | <option value=""> |
| 9 | Choose a role... |
| 10 | </option> |
| 11 | <option value="dev"> |
| 12 | Developer |
| 13 | </option> |
| 14 | <option value="designer"> |
| 15 | Designer |
| 16 | </option> |
| 17 | <option value="manager"> |
| 18 | Product Manager |
| 19 | </option> |
| 20 | </select> |
| 21 | <svg class="chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 22 | <polyline points="6 9 12 15 18 9"/> |
| 23 | </svg> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="field"> |
| 27 | <label for="theme"> |
| 28 | Theme |
| 29 | </label> |
| 30 | <div class="select-wrap"> |
| 31 | <select id="theme" disabled> |
| 32 | <option> |
| 33 | System default |
| 34 | </option> |
| 35 | </select> |
| 36 | <svg class="chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 37 | <polyline points="6 9 12 15 18 9"/> |
| 38 | </svg> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:360px; |
| 14 | margin:16px auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:16px |
| 18 | } |
| 19 | .field { |
| 20 | display:flex; |
| 21 | flex-direction:column; |
| 22 | gap:6px |
| 23 | } |
| 24 | .field label { |
| 25 | font-size:12px; |
| 26 | color:#E0E0E0; |
| 27 | font-weight:500 |
| 28 | } |
| 29 | .select-wrap { |
| 30 | position:relative |
| 31 | } |
| 32 | .select-wrap select { |
| 33 | width:100%; |
| 34 | padding:10px 36px 10px 12px; |
| 35 | border-radius:8px; |
| 36 | border:1.5px solid #2A2A3E; |
| 37 | background:#0A0A0A; |
| 38 | color:#E0E0E0; |
| 39 | font-size:13px; |
| 40 | appearance:none; |
| 41 | outline:none; |
| 42 | cursor:pointer; |
| 43 | transition:border-color .2s, |
| 44 | box-shadow .2s |
| 45 | } |
| 46 | .select-wrap select:focus { |
| 47 | border-color:#00FF41; |
| 48 | box-shadow:0 0 0 3px rgba(0, |
| 49 | 255, |
| 50 | 65, |
| 51 | .1) |
| 52 | } |
| 53 | .select-wrap select:disabled { |
| 54 | opacity:.5; |
| 55 | cursor:not-allowed; |
| 56 | background:#111 |
| 57 | } |
| 58 | .chevron { |
| 59 | position:absolute; |
| 60 | right:12px; |
| 61 | top:50%; |
| 62 | transform:translateY(-50%); |
| 63 | color:#808080; |
| 64 | pointer-events:none |
| 65 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto flex flex-col gap-4 p-6 bg-[#0A0A0A] font-sans"> |
| 2 | <div class="flex flex-col gap-1.5"> |
| 3 | <label for="role" class="text-xs text-[#E0E0E0] font-medium"> |
| 4 | Role |
| 5 | </label> |
| 6 | <div class="relative"> |
| 7 | <select id="role" class="w-full px-3 py-2.5 pr-9 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] text-[13px] text-[#E0E0E0] appearance-none outline-none focus:border-[#00FF41] focus:ring-[3px] focus:ring-[#00FF41]/10 transition-all cursor-pointer"> |
| 8 | <option value=""> |
| 9 | Choose a role... |
| 10 | </option> |
| 11 | <option value="dev"> |
| 12 | Developer |
| 13 | </option> |
| 14 | <option value="designer"> |
| 15 | Designer |
| 16 | </option> |
| 17 | <option value="manager"> |
| 18 | Product Manager |
| 19 | </option> |
| 20 | </select> |
| 21 | <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#808080] pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 22 | <polyline points="6 9 12 15 18 9"/> |
| 23 | </svg> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="flex flex-col gap-1.5"> |
| 27 | <label for="theme" class="text-xs text-[#E0E0E0] font-medium"> |
| 28 | Theme |
| 29 | </label> |
| 30 | <div class="relative"> |
| 31 | <select id="theme" disabled class="w-full px-3 py-2.5 pr-9 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#111] text-[13px] text-[#E0E0E0] opacity-50 cursor-not-allowed appearance-none outline-none"> |
| 32 | <option> |
| 33 | System default |
| 34 | </option> |
| 35 | </select> |
| 36 | <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#808080] pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 37 | <polyline points="6 9 12 15 18 9"/> |
| 38 | </svg> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-secondary:#808080;--bs-border-color:#2A2A3E;--bs-form-select-bg:#0A0A0A;--bs-form-select-color:#E0E0E0;--bs-form-select-border-color:#2A2A3E;--bs-form-select-focus-border-color:#00FF41;--bs-form-select-focus-box-shadow:0 0 0 0.25rem rgba(0,255,65,.25);--bs-form-select-disabled-bg:#111;--bs-form-select-disabled-color:#808080} |
| 3 | </style> |
| 4 | <div class="container p-4" style="max-width:360px"> |
| 5 | <div class="mb-3"> |
| 6 | <label for="role" class="form-label" style="color:#E0E0E0"> |
| 7 | Role |
| 8 | </label> |
| 9 | <select id="role" class="form-select"> |
| 10 | <option value=""> |
| 11 | Choose a role... |
| 12 | </option> |
| 13 | <option value="dev"> |
| 14 | Developer |
| 15 | </option> |
| 16 | <option value="designer"> |
| 17 | Designer |
| 18 | </option> |
| 19 | <option value="manager"> |
| 20 | Product Manager |
| 21 | </option> |
| 22 | </select> |
| 23 | </div> |
| 24 | <div> |
| 25 | <label for="theme" class="form-label" style="color:#E0E0E0"> |
| 26 | Theme |
| 27 | </label> |
| 28 | <select id="theme" class="form-select" disabled> |
| 29 | <option> |
| 30 | System default |
| 31 | </option> |
| 32 | </select> |
| 33 | </div> |
| 34 | </div> |
Toggle Switch
Sized toggle switches with labeled variants.
toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="t"> |
| 3 | <input type="checkbox" checked /> |
| 4 | <span class="slider"> |
| 5 | </span> |
| 6 | Notifications |
| 7 | </label> |
| 8 | <label class="t"> |
| 9 | <input type="checkbox" /> |
| 10 | <span class="slider"> |
| 11 | </span> |
| 12 | Dark Mode |
| 13 | </label> |
| 14 | <label class="t sm"> |
| 15 | <input type="checkbox" checked /> |
| 16 | <span class="slider"> |
| 17 | </span> |
| 18 | Compact |
| 19 | </label> |
| 20 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:16px; |
| 16 | max-width:280px; |
| 17 | margin:20px auto |
| 18 | } |
| 19 | .t { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:12px; |
| 23 | font-size:13px; |
| 24 | color:#A0A0A0; |
| 25 | cursor:pointer |
| 26 | } |
| 27 | .t input { |
| 28 | display:none |
| 29 | } |
| 30 | .slider { |
| 31 | width:40px; |
| 32 | height:22px; |
| 33 | background:#222; |
| 34 | border-radius:11px; |
| 35 | position:relative; |
| 36 | transition:background .3s; |
| 37 | flex-shrink:0 |
| 38 | } |
| 39 | .slider::after { |
| 40 | content:''; |
| 41 | position:absolute; |
| 42 | top:3px; |
| 43 | left:3px; |
| 44 | width:16px; |
| 45 | height:16px; |
| 46 | border-radius:50%; |
| 47 | background:#808080; |
| 48 | transition:all .3s |
| 49 | } |
| 50 | .t input:checked+.slider { |
| 51 | background:rgba(0, |
| 52 | 255, |
| 53 | 65, |
| 54 | .3) |
| 55 | } |
| 56 | .t input:checked+.slider::after { |
| 57 | background:#00FF41; |
| 58 | transform:translateX(18px) |
| 59 | } |
| 60 | .sm .slider { |
| 61 | width:32px; |
| 62 | height:18px |
| 63 | } |
| 64 | .sm .slider::after { |
| 65 | width:12px; |
| 66 | height:12px; |
| 67 | top:3px; |
| 68 | left:3px |
| 69 | } |
| 70 | .sm input:checked+.slider::after { |
| 71 | transform:translateX(14px) |
| 72 | } |
untitled.html
HTML
| 1 | <div class="max-w-xs mx-auto flex flex-col gap-4 p-6 bg-[#0A0A0A]"> |
| 2 | <label class="flex items-center gap-3 text-[13px] text-[#A0A0A0] cursor-pointer"> |
| 3 | <input type="checkbox" checked class="sr-only peer" /> |
| 4 | <span class="relative w-10 h-[22px] bg-[#222] rounded-full transition-colors peer-checked:bg-[#00FF41]/30 after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:w-4 after:h-4 after:rounded-full after:bg-[#808080] peer-checked:after:bg-[#00FF41] peer-checked:after:translate-x-[18px] after:transition-all"> |
| 5 | </span> |
| 6 | Notifications |
| 7 | </label> |
| 8 | <label class="flex items-center gap-3 text-[13px] text-[#A0A0A0] cursor-pointer"> |
| 9 | <input type="checkbox" class="sr-only peer" /> |
| 10 | <span class="relative w-10 h-[22px] bg-[#222] rounded-full transition-colors peer-checked:bg-[#00FF41]/30 after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:w-4 after:h-4 after:rounded-full after:bg-[#808080] peer-checked:after:bg-[#00FF41] peer-checked:after:translate-x-[18px] after:transition-all"> |
| 11 | </span> |
| 12 | Dark Mode |
| 13 | </label> |
| 14 | <label class="flex items-center gap-3 text-[13px] text-[#A0A0A0] cursor-pointer"> |
| 15 | <input type="checkbox" checked class="sr-only peer" /> |
| 16 | <span class="relative w-8 h-[18px] bg-[#222] rounded-full transition-colors peer-checked:bg-[#00FF41]/30 after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:w-3 after:h-3 after:rounded-full after:bg-[#808080] peer-checked:after:bg-[#00FF41] peer-checked:after:translate-x-[14px] after:transition-all"> |
| 17 | </span> |
| 18 | Compact |
| 19 | </label> |
| 20 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-border-color:#2A2A3E;--bs-form-check-input-checked-bg-color:#00FF41;--bs-form-check-input-checked-border-color:#00FF41;--bs-form-check-input-bg:#222;--bs-form-check-input-border:1px solid #333;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23808080'/%3e%3c/svg%3e");--bs-form-switch-checked-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300FF41'/%3e%3c/svg%3e")} |
| 3 | </style> |
| 4 | <div class="d-flex flex-column gap-3 align-items-start p-4"> |
| 5 | <div class="form-check form-switch"> |
| 6 | <input class="form-check-input" type="checkbox" checked /> |
| 7 | <label class="form-check-label" style="color:#A0A0A0"> |
| 8 | Notifications |
| 9 | </label> |
| 10 | </div> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" /> |
| 13 | <label class="form-check-label" style="color:#A0A0A0"> |
| 14 | Dark Mode |
| 15 | </label> |
| 16 | </div> |
| 17 | <div class="form-check form-switch"> |
| 18 | <input class="form-check-input" type="checkbox" checked /> |
| 19 | <label class="form-check-label" style="color:#A0A0A0"> |
| 20 | Compact |
| 21 | </label> |
| 22 | </div> |
| 23 | </div> |
Checkbox Cards
Selectable cards with a custom checkmark and active state.
checkbox-cards
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="c-card"> |
| 3 | <input type="checkbox" checked /> |
| 4 | <span class="check"> |
| 5 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 6 | <polyline points="20 6 9 17 4 12"/> |
| 7 | </svg> |
| 8 | </span> |
| 9 | <span class="c-text"> |
| 10 | Push notifications |
| 11 | </span> |
| 12 | </label> |
| 13 | <label class="c-card"> |
| 14 | <input type="checkbox" /> |
| 15 | <span class="check"> |
| 16 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 17 | <polyline points="20 6 9 17 4 12"/> |
| 18 | </svg> |
| 19 | </span> |
| 20 | <span class="c-text"> |
| 21 | Email digest |
| 22 | </span> |
| 23 | </label> |
| 24 | <label class="c-card"> |
| 25 | <input type="checkbox" /> |
| 26 | <span class="check"> |
| 27 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 28 | <polyline points="20 6 9 17 4 12"/> |
| 29 | </svg> |
| 30 | </span> |
| 31 | <span class="c-text"> |
| 32 | SMS alerts |
| 33 | </span> |
| 34 | </label> |
| 35 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:320px; |
| 14 | margin:16px auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:8px |
| 18 | } |
| 19 | .c-card { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:12px; |
| 23 | padding:12px; |
| 24 | border-radius:8px; |
| 25 | border:1.5px solid #2A2A3E; |
| 26 | background:#0A0A0A; |
| 27 | cursor:pointer; |
| 28 | transition:all .2s |
| 29 | } |
| 30 | .c-card:hover { |
| 31 | border-color:#3A3A4E; |
| 32 | background:#111 |
| 33 | } |
| 34 | .c-card input { |
| 35 | display:none |
| 36 | } |
| 37 | .check { |
| 38 | width:18px; |
| 39 | height:18px; |
| 40 | border-radius:4px; |
| 41 | border:2px solid #444; |
| 42 | display:flex; |
| 43 | align-items:center; |
| 44 | justify-content:center; |
| 45 | color:transparent; |
| 46 | transition:all .2s |
| 47 | } |
| 48 | .c-card input:checked+.check { |
| 49 | background:#00FF41; |
| 50 | border-color:#00FF41; |
| 51 | color:#0A0A0A |
| 52 | } |
| 53 | .c-card input:checked~.c-text { |
| 54 | color:#E0E0E0 |
| 55 | } |
| 56 | .c-text { |
| 57 | font-size:13px; |
| 58 | color:#A0A0A0; |
| 59 | transition:color .2s |
| 60 | } |
untitled.html
HTML
| 1 | <div class="max-w-xs mx-auto flex flex-col gap-2 p-6 bg-[#0A0A0A]"> |
| 2 | <label class="flex items-center gap-3 px-3 py-3 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] cursor-pointer hover:border-[#3A3A4E] hover:bg-[#111] transition-all"> |
| 3 | <input type="checkbox" checked class="sr-only peer" /> |
| 4 | <span class="w-[18px] h-[18px] rounded flex items-center justify-center border-2 border-[#444] text-transparent peer-checked:bg-[#00FF41] peer-checked:border-[#00FF41] peer-checked:text-[#0A0A0A] transition-all"> |
| 5 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 6 | <polyline points="20 6 9 17 4 12"/> |
| 7 | </svg> |
| 8 | </span> |
| 9 | <span class="text-[13px] text-[#A0A0A0] peer-checked:text-[#E0E0E0] transition-colors"> |
| 10 | Push notifications |
| 11 | </span> |
| 12 | </label> |
| 13 | <label class="flex items-center gap-3 px-3 py-3 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] cursor-pointer hover:border-[#3A3A4E] hover:bg-[#111] transition-all"> |
| 14 | <input type="checkbox" class="sr-only peer" /> |
| 15 | <span class="w-[18px] h-[18px] rounded flex items-center justify-center border-2 border-[#444] text-transparent peer-checked:bg-[#00FF41] peer-checked:border-[#00FF41] peer-checked:text-[#0A0A0A] transition-all"> |
| 16 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 17 | <polyline points="20 6 9 17 4 12"/> |
| 18 | </svg> |
| 19 | </span> |
| 20 | <span class="text-[13px] text-[#A0A0A0] peer-checked:text-[#E0E0E0] transition-colors"> |
| 21 | Email digest |
| 22 | </span> |
| 23 | </label> |
| 24 | <label class="flex items-center gap-3 px-3 py-3 rounded-lg border-[1.5px] border-[#2A2A3E] bg-[#0A0A0A] cursor-pointer hover:border-[#3A3A4E] hover:bg-[#111] transition-all"> |
| 25 | <input type="checkbox" class="sr-only peer" /> |
| 26 | <span class="w-[18px] h-[18px] rounded flex items-center justify-center border-2 border-[#444] text-transparent peer-checked:bg-[#00FF41] peer-checked:border-[#00FF41] peer-checked:text-[#0A0A0A] transition-all"> |
| 27 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 28 | <polyline points="20 6 9 17 4 12"/> |
| 29 | </svg> |
| 30 | </span> |
| 31 | <span class="text-[13px] text-[#A0A0A0] peer-checked:text-[#E0E0E0] transition-colors"> |
| 32 | SMS alerts |
| 33 | </span> |
| 34 | </label> |
| 35 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-border-color:#2A2A3E;--bs-form-check-input-checked-bg-color:#00FF41;--bs-form-check-input-checked-border-color:#00FF41;--bs-form-check-input-bg:#0A0A0A;--bs-form-check-input-border:1.5px solid #444} |
| 3 | </style> |
| 4 | <div class="d-flex flex-column gap-2 p-4" style="max-width:320px"> |
| 5 | <label class="form-check d-flex align-items-center gap-3 p-3 rounded border" style="border-color:#2A2A3E !important;background:#0A0A0A;cursor:pointer"> |
| 6 | <input class="form-check-input" type="checkbox" checked /> |
| 7 | <span class="form-check-label" style="color:#E0E0E0"> |
| 8 | Push notifications |
| 9 | </span> |
| 10 | </label> |
| 11 | <label class="form-check d-flex align-items-center gap-3 p-3 rounded border" style="border-color:#2A2A3E !important;background:#0A0A0A;cursor:pointer"> |
| 12 | <input class="form-check-input" type="checkbox" /> |
| 13 | <span class="form-check-label" style="color:#A0A0A0"> |
| 14 | Email digest |
| 15 | </span> |
| 16 | </label> |
| 17 | <label class="form-check d-flex align-items-center gap-3 p-3 rounded border" style="border-color:#2A2A3E !important;background:#0A0A0A;cursor:pointer"> |
| 18 | <input class="form-check-input" type="checkbox" /> |
| 19 | <span class="form-check-label" style="color:#A0A0A0"> |
| 20 | SMS alerts |
| 21 | </span> |
| 22 | </label> |
| 23 | </div> |
Radio Button Group
Styled radio buttons as a segmented card selection.
radio
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="r"> |
| 3 | <input type="radio" name="plan" checked /> |
| 4 | <span class="radio-mark"> |
| 5 | </span> |
| 6 | <div> |
| 7 | <strong> |
| 8 | Free |
| 9 | </strong> |
| 10 | <p class="r-sub"> |
| 11 | $0/mo — basic features |
| 12 | </p> |
| 13 | </div> |
| 14 | </label> |
| 15 | <label class="r"> |
| 16 | <input type="radio" name="plan" /> |
| 17 | <span class="radio-mark"> |
| 18 | </span> |
| 19 | <div> |
| 20 | <strong> |
| 21 | Pro |
| 22 | </strong> |
| 23 | <p class="r-sub"> |
| 24 | $12/mo — advanced features |
| 25 | </p> |
| 26 | </div> |
| 27 | </label> |
| 28 | <label class="r"> |
| 29 | <input type="radio" name="plan" /> |
| 30 | <span class="radio-mark"> |
| 31 | </span> |
| 32 | <div> |
| 33 | <strong> |
| 34 | Enterprise |
| 35 | </strong> |
| 36 | <p class="r-sub"> |
| 37 | Custom pricing |
| 38 | </p> |
| 39 | </div> |
| 40 | </label> |
| 41 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:340px; |
| 14 | margin:16px auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:8px |
| 18 | } |
| 19 | .r { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:12px; |
| 23 | padding:12px; |
| 24 | border-radius:8px; |
| 25 | border:1.5px solid #222; |
| 26 | cursor:pointer; |
| 27 | transition:all .2s |
| 28 | } |
| 29 | .r:hover { |
| 30 | border-color:#333 |
| 31 | } |
| 32 | .r input { |
| 33 | display:none |
| 34 | } |
| 35 | .r:has(input:checked) { |
| 36 | border-color:#00FF41; |
| 37 | background:rgba(0, |
| 38 | 255, |
| 39 | 65, |
| 40 | .04) |
| 41 | } |
| 42 | .radio-mark { |
| 43 | width:18px; |
| 44 | height:18px; |
| 45 | border-radius:50%; |
| 46 | border:2px solid #444; |
| 47 | display:flex; |
| 48 | align-items:center; |
| 49 | justify-content:center; |
| 50 | flex-shrink:0; |
| 51 | transition:all .2s |
| 52 | } |
| 53 | .radio-mark::after { |
| 54 | content:''; |
| 55 | width:8px; |
| 56 | height:8px; |
| 57 | border-radius:50%; |
| 58 | background:transparent; |
| 59 | transition:all .2s |
| 60 | } |
| 61 | .r input:checked+.radio-mark { |
| 62 | border-color:#00FF41 |
| 63 | } |
| 64 | .r input:checked+.radio-mark::after { |
| 65 | background:#00FF41 |
| 66 | } |
| 67 | .r strong { |
| 68 | font-size:13px; |
| 69 | color:#E0E0E0 |
| 70 | } |
| 71 | .r-sub { |
| 72 | font-size:11px; |
| 73 | color:#808080; |
| 74 | margin-top:2px |
| 75 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto flex flex-col gap-2 p-6 bg-[#0A0A0A]"> |
| 2 | <label class="flex items-center gap-3 p-3 rounded-lg border-[1.5px] border-[#222] hover:border-[#333] cursor-pointer transition-all has-[input:checked]:border-[#00FF41] has-[input:checked]:bg-[rgba(0,255,65,0.04)]"> |
| 3 | <input type="radio" name="plan" checked class="sr-only peer" /> |
| 4 | <span class="w-[18px] h-[18px] rounded-full border-2 border-[#444] flex items-center justify-center flex-shrink-0 peer-checked:border-[#00FF41] transition-all"> |
| 5 | <span class="w-2 h-2 rounded-full bg-transparent peer-checked:bg-[#00FF41] transition-all"> |
| 6 | </span> |
| 7 | </span> |
| 8 | <div> |
| 9 | <strong class="text-[13px] text-[#E0E0E0]"> |
| 10 | Free |
| 11 | </strong> |
| 12 | <p class="text-[11px] text-[#808080] mt-0.5"> |
| 13 | $0/mo — basic features |
| 14 | </p> |
| 15 | </div> |
| 16 | </label> |
| 17 | <label class="flex items-center gap-3 p-3 rounded-lg border-[1.5px] border-[#222] hover:border-[#333] cursor-pointer transition-all has-[input:checked]:border-[#00FF41] has-[input:checked]:bg-[rgba(0,255,65,0.04)]"> |
| 18 | <input type="radio" name="plan" class="sr-only peer" /> |
| 19 | <span class="w-[18px] h-[18px] rounded-full border-2 border-[#444] flex items-center justify-center flex-shrink-0 peer-checked:border-[#00FF41] transition-all"> |
| 20 | <span class="w-2 h-2 rounded-full bg-transparent peer-checked:bg-[#00FF41] transition-all"> |
| 21 | </span> |
| 22 | </span> |
| 23 | <div> |
| 24 | <strong class="text-[13px] text-[#E0E0E0]"> |
| 25 | Pro |
| 26 | </strong> |
| 27 | <p class="text-[11px] text-[#808080] mt-0.5"> |
| 28 | $12/mo — advanced features |
| 29 | </p> |
| 30 | </div> |
| 31 | </label> |
| 32 | <label class="flex items-center gap-3 p-3 rounded-lg border-[1.5px] border-[#222] hover:border-[#333] cursor-pointer transition-all has-[input:checked]:border-[#00FF41] has-[input:checked]:bg-[rgba(0,255,65,0.04)]"> |
| 33 | <input type="radio" name="plan" class="sr-only peer" /> |
| 34 | <span class="w-[18px] h-[18px] rounded-full border-2 border-[#444] flex items-center justify-center flex-shrink-0 peer-checked:border-[#00FF41] transition-all"> |
| 35 | <span class="w-2 h-2 rounded-full bg-transparent peer-checked:bg-[#00FF41] transition-all"> |
| 36 | </span> |
| 37 | </span> |
| 38 | <div> |
| 39 | <strong class="text-[13px] text-[#E0E0E0]"> |
| 40 | Enterprise |
| 41 | </strong> |
| 42 | <p class="text-[11px] text-[#808080] mt-0.5"> |
| 43 | Custom pricing |
| 44 | </p> |
| 45 | </div> |
| 46 | </label> |
| 47 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-border-color:#2A2A3E;--bs-form-check-input-checked-bg-color:#00FF41;--bs-form-check-input-checked-border-color:#00FF41;--bs-form-check-input-bg:#0A0A0A;--bs-form-check-input-border:1.5px solid #444} |
| 3 | </style> |
| 4 | <div class="d-flex flex-column gap-2 p-4" style="max-width:340px"> |
| 5 | <label class="form-check d-flex align-items-center gap-3 p-3 rounded border" style="border-color:#2A2A3E !important;background:#0A0A0A;cursor:pointer"> |
| 6 | <input class="form-check-input" type="radio" name="plan" checked /> |
| 7 | <div> |
| 8 | <div class="fw-semibold" style="color:#E0E0E0"> |
| 9 | Free |
| 10 | </div> |
| 11 | <div class="form-text"> |
| 12 | $0/mo — basic features |
| 13 | </div> |
| 14 | </div> |
| 15 | </label> |
| 16 | <label class="form-check d-flex align-items-center gap-3 p-3 rounded border" style="border-color:#2A2A3E !important;background:#0A0A0A;cursor:pointer"> |
| 17 | <input class="form-check-input" type="radio" name="plan" /> |
| 18 | <div> |
| 19 | <div class="fw-semibold" style="color:#E0E0E0"> |
| 20 | Pro |
| 21 | </div> |
| 22 | <div class="form-text"> |
| 23 | $12/mo — advanced features |
| 24 | </div> |
| 25 | </div> |
| 26 | </label> |
| 27 | <label class="form-check d-flex align-items-center gap-3 p-3 rounded border" style="border-color:#2A2A3E !important;background:#0A0A0A;cursor:pointer"> |
| 28 | <input class="form-check-input" type="radio" name="plan" /> |
| 29 | <div> |
| 30 | <div class="fw-semibold" style="color:#E0E0E0"> |
| 31 | Enterprise |
| 32 | </div> |
| 33 | <div class="form-text"> |
| 34 | Custom pricing |
| 35 | </div> |
| 36 | </div> |
| 37 | </label> |
| 38 | </div> |
Range Slider
Custom styled range slider with live value display.
slider
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="slider-group"> |
| 3 | <label class="label"> |
| 4 | Volume |
| 5 | </label> |
| 6 | <input type="range" min="0" max="100" value="65" class="range" /> |
| 7 | <span class="val" id="vol"> |
| 8 | 65 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="slider-group"> |
| 12 | <label class="label"> |
| 13 | Brightness |
| 14 | </label> |
| 15 | <input type="range" min="0" max="100" value="80" class="range green" /> |
| 16 | <span class="val" id="bri"> |
| 17 | 80 |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:380px; |
| 14 | margin:16px auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:20px; |
| 18 | padding:16px |
| 19 | } |
| 20 | .slider-group { |
| 21 | display:flex; |
| 22 | align-items:center; |
| 23 | gap:12px |
| 24 | } |
| 25 | .label { |
| 26 | font-size:12px; |
| 27 | color:#A0A0A0; |
| 28 | min-width:70px |
| 29 | } |
| 30 | .range { |
| 31 | -webkit-appearance:none; |
| 32 | appearance:none; |
| 33 | flex:1; |
| 34 | height:6px; |
| 35 | border-radius:3px; |
| 36 | background:#222; |
| 37 | outline:none |
| 38 | } |
| 39 | .range::-webkit-slider-thumb { |
| 40 | -webkit-appearance:none; |
| 41 | width:18px; |
| 42 | height:18px; |
| 43 | border-radius:50%; |
| 44 | background:#00FF41; |
| 45 | cursor:pointer; |
| 46 | border:2px solid #0A0A0A; |
| 47 | box-shadow:0 0 0 1px #00FF41 |
| 48 | } |
| 49 | .range.green::-webkit-slider-thumb { |
| 50 | background:#22C55E; |
| 51 | box-shadow:0 0 0 1px #22C55E |
| 52 | } |
| 53 | .val { |
| 54 | font-size:12px; |
| 55 | color:#808080; |
| 56 | min-width:28px; |
| 57 | text-align:right; |
| 58 | font-weight:600 |
| 59 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.range').forEach(r=>{const v=r.nextElementSibling;if(v){r.addEventListener('input',()=>v.textContent=r.value)}}) |
untitled.html
HTML
| 1 | <div class="max-w-md mx-auto flex flex-col gap-5 p-6 bg-[#0A0A0A]" data-slider> |
| 2 | <div class="flex items-center gap-3"> |
| 3 | <label class="min-w-[70px] text-xs text-[#A0A0A0]"> |
| 4 | Volume |
| 5 | </label> |
| 6 | <input type="range" min="0" max="100" value="65" class="flex-1 h-1.5 rounded bg-[#222] appearance-none outline-none accent-[#00FF41] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#00FF41] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[#0A0A0A] [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_#00FF41]" /> |
| 7 | <span class="min-w-[28px] text-right text-xs text-[#808080] font-semibold"> |
| 8 | 65 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="flex items-center gap-3"> |
| 12 | <label class="min-w-[70px] text-xs text-[#A0A0A0]"> |
| 13 | Brightness |
| 14 | </label> |
| 15 | <input type="range" min="0" max="100" value="80" class="flex-1 h-1.5 rounded bg-[#222] appearance-none outline-none accent-[#22C55E] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#22C55E] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[#0A0A0A] [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_#22C55E]" /> |
| 16 | <span class="min-w-[28px] text-right text-xs text-[#808080] font-semibold"> |
| 17 | 80 |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-success:#22C55E;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-form-range-thumb-bg:#00FF41;--bs-form-range-thumb-active-bg:#00E63A;--bs-form-range-track-bg:#222} |
| 3 | </style> |
| 4 | <div class="container p-4" style="max-width:400px"> |
| 5 | <div class="mb-4"> |
| 6 | <label class="form-label d-flex justify-content-between" style="color:#A0A0A0"> |
| 7 | <span> |
| 8 | Volume |
| 9 | </span> |
| 10 | <span class="badge bg-success" style="background:#00FF41 !important;color:#0A0A0A"> |
| 11 | 65 |
| 12 | </span> |
| 13 | </label> |
| 14 | <input type="range" class="form-range" min="0" max="100" value="65" data-bs-label /> |
| 15 | </div> |
| 16 | <div> |
| 17 | <label class="form-label d-flex justify-content-between" style="color:#A0A0A0"> |
| 18 | <span> |
| 19 | Brightness |
| 20 | </span> |
| 21 | <span class="badge bg-success" style="background:#22C55E !important;color:#0A0A0A"> |
| 22 | 80 |
| 23 | </span> |
| 24 | </label> |
| 25 | <input type="range" class="form-range" min="0" max="100" value="80" data-bs-label /> |
| 26 | </div> |
| 27 | </div> |
| 28 | <script> |
| 29 | (function(){document.querySelectorAll('[data-bs-label]').forEach(r=>{const b=r.parentElement.querySelector('.badge');r.addEventListener('input',()=>{if(b)b.textContent=r.value})})})(); |
| 30 | </script> |
File Upload
Drag-and-drop file upload zone with button alternative.
file-upload
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="drop-zone"> |
| 3 | <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
| 4 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| 5 | <polyline points="17 8 12 3 7 8"/> |
| 6 | <line x1="12" y1="3" x2="12" y2="15"/> |
| 7 | </svg> |
| 8 | <span class="dz-text"> |
| 9 | Drop files here or |
| 10 | <span class="dz-link"> |
| 11 | browse |
| 12 | </span> |
| 13 | </span> |
| 14 | <span class="dz-hint"> |
| 15 | PNG, JPG, PDF up to 10MB |
| 16 | </span> |
| 17 | </div> |
| 18 | <button class="upload-btn"> |
| 19 | Choose File |
| 20 | </button> |
| 21 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:380px; |
| 14 | margin:16px auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:12px; |
| 18 | align-items:center; |
| 19 | padding:8px |
| 20 | } |
| 21 | .drop-zone { |
| 22 | width:100%; |
| 23 | padding:28px 20px; |
| 24 | border:2px dashed #333; |
| 25 | border-radius:10px; |
| 26 | display:flex; |
| 27 | flex-direction:column; |
| 28 | align-items:center; |
| 29 | justify-content:center; |
| 30 | cursor:pointer; |
| 31 | transition:all .3s |
| 32 | } |
| 33 | .drop-zone:hover { |
| 34 | border-color:#00FF41; |
| 35 | background:rgba(0, |
| 36 | 255, |
| 37 | 65, |
| 38 | .03) |
| 39 | } |
| 40 | .dz-text { |
| 41 | font-size:13px; |
| 42 | color:#808080 |
| 43 | } |
| 44 | .dz-link { |
| 45 | color:#00FF41; |
| 46 | cursor:pointer; |
| 47 | text-decoration:underline |
| 48 | } |
| 49 | .dz-hint { |
| 50 | font-size:10px; |
| 51 | color:#525252; |
| 52 | margin-top:4px |
| 53 | } |
| 54 | .upload-btn { |
| 55 | padding:10px 24px; |
| 56 | border-radius:8px; |
| 57 | font-size:12px; |
| 58 | font-weight:600; |
| 59 | font-family:inherit; |
| 60 | border:1px solid #2A2A3E; |
| 61 | background:#1A1A2E; |
| 62 | color:#E0E0E0; |
| 63 | cursor:pointer; |
| 64 | transition:all .2s |
| 65 | } |
| 66 | .upload-btn:hover { |
| 67 | background:#22223A; |
| 68 | border-color:#3A3A4E |
| 69 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto flex flex-col gap-3 items-center p-6 bg-[#0A0A0A]"> |
| 2 | <div class="w-full py-7 px-5 border-2 border-dashed border-[#333] rounded-xl flex flex-col items-center justify-center cursor-pointer transition-all hover:border-[#00FF41] hover:bg-[rgba(0,255,65,0.03)]"> |
| 3 | <svg class="w-8 h-8 text-[#525252] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
| 4 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| 5 | <polyline points="17 8 12 3 7 8"/> |
| 6 | <line x1="12" y1="3" x2="12" y2="15"/> |
| 7 | </svg> |
| 8 | <span class="text-[13px] text-[#808080]"> |
| 9 | Drop files here or |
| 10 | <span class="text-[#00FF41] underline cursor-pointer"> |
| 11 | browse |
| 12 | </span> |
| 13 | </span> |
| 14 | <span class="text-[10px] text-[#525252] mt-1"> |
| 15 | PNG, JPG, PDF up to 10MB |
| 16 | </span> |
| 17 | </div> |
| 18 | <button class="px-6 py-2.5 rounded-lg text-xs font-semibold border border-[#2A2A3E] bg-[#1A1A2E] text-[#E0E0E0] hover:bg-[#22223A] hover:border-[#3A3A4E] transition-all"> |
| 19 | Choose File |
| 20 | </button> |
| 21 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0;--bs-border-color:#333} |
| 3 | </style> |
| 4 | <div class="d-flex flex-column gap-3 align-items-center p-4" style="max-width:380px"> |
| 5 | <div class="w-100 py-5 border border-2 border-dashed rounded d-flex flex-column align-items-center justify-content-center" style="border-color:#333 !important;cursor:pointer"> |
| 6 | <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#525252" stroke-width="1.5"> |
| 7 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| 8 | <polyline points="17 8 12 3 7 8"/> |
| 9 | <line x1="12" y1="3" x2="12" y2="15"/> |
| 10 | </svg> |
| 11 | <span class="mt-2 small" style="color:#808080"> |
| 12 | Drop files here or |
| 13 | <span style="color:#00FF41;text-decoration:underline;cursor:pointer"> |
| 14 | browse |
| 15 | </span> |
| 16 | </span> |
| 17 | <span class="text-muted" style="font-size:10px"> |
| 18 | PNG, JPG, PDF up to 10MB |
| 19 | </span> |
| 20 | </div> |
| 21 | <button class="btn btn-outline-secondary fw-semibold" style="--bs-btn-color:#E0E0E0;--bs-btn-border-color:#2A2A3E;--bs-btn-hover-bg:#22223A;--bs-btn-hover-border-color:#3A3A4E"> |
| 22 | Choose File |
| 23 | </button> |
| 24 | </div> |
Star Rating
Interactive star rating with hover and selected states.
rating
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="stars" style="--val:3"> |
| 3 | <span class="star" data-val="1"> |
| 4 | ★ |
| 5 | </span> |
| 6 | <span class="star" data-val="2"> |
| 7 | ★ |
| 8 | </span> |
| 9 | <span class="star" data-val="3"> |
| 10 | ★ |
| 11 | </span> |
| 12 | <span class="star" data-val="4"> |
| 13 | ★ |
| 14 | </span> |
| 15 | <span class="star" data-val="5"> |
| 16 | ★ |
| 17 | </span> |
| 18 | </div> |
| 19 | <span class="label"> |
| 20 | 3 / 5 |
| 21 | </span> |
| 22 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | align-items:center; |
| 15 | justify-content:center; |
| 16 | gap:16px; |
| 17 | padding:24px |
| 18 | } |
| 19 | .stars { |
| 20 | display:flex; |
| 21 | gap:4px; |
| 22 | direction:rtl |
| 23 | } |
| 24 | .star { |
| 25 | font-size:28px; |
| 26 | cursor:pointer; |
| 27 | color:#333; |
| 28 | transition:color .2s |
| 29 | } |
| 30 | .star:hover, |
| 31 | .star:hover~.star { |
| 32 | color:#EAB308 |
| 33 | } |
| 34 | .stars .star { |
| 35 | color:#333 |
| 36 | } |
| 37 | .stars .star.active { |
| 38 | color:#EAB308 |
| 39 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.stars').forEach(wrap=>{const stars=wrap.querySelectorAll('.star');const label=wrap.nextElementSibling;const val=Number(wrap.style.getPropertyValue('--val')||0);stars.forEach((s,i)=>{if(i<val)s.classList.add('active')});wrap.addEventListener('click',e=>{const star=e.target.closest('.star');if(!star)return;const v=Number(star.dataset.val);stars.forEach((s,i)=>{s.classList.toggle('active',i<v)});if(label)label.textContent=v+' / 5'})}) |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center gap-4 p-6 bg-[#0A0A0A]" data-rating> |
| 2 | <div class="flex gap-1 flex-row-reverse"> |
| 3 | <button type="button" data-val="5" class="text-[28px] text-[#333] transition-colors"> |
| 4 | ★ |
| 5 | </button> |
| 6 | <button type="button" data-val="4" class="text-[28px] text-[#333] transition-colors"> |
| 7 | ★ |
| 8 | </button> |
| 9 | <button type="button" data-val="3" class="text-[28px] text-[#333] transition-colors"> |
| 10 | ★ |
| 11 | </button> |
| 12 | <button type="button" data-val="2" class="text-[28px] text-[#333] transition-colors"> |
| 13 | ★ |
| 14 | </button> |
| 15 | <button type="button" data-val="1" class="text-[28px] text-[#333] transition-colors"> |
| 16 | ★ |
| 17 | </button> |
| 18 | </div> |
| 19 | <span class="text-xs text-[#808080]" data-label> |
| 20 | 3 / 5 |
| 21 | </span> |
| 22 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-primary:#00FF41;--bs-body-bg:#0A0A0A;--bs-body-color:#E0E0E0} |
| 3 | </style> |
| 4 | <div class="d-flex align-items-center justify-content-center gap-3 p-4" data-rating> |
| 5 | <div class="d-flex gap-1 flex-row-reverse"> |
| 6 | <button type="button" data-val="5" class="btn btn-link p-0 text-decoration-none" style="font-size:28px;color:#333"> |
| 7 | ★ |
| 8 | </button> |
| 9 | <button type="button" data-val="4" class="btn btn-link p-0 text-decoration-none" style="font-size:28px;color:#333"> |
| 10 | ★ |
| 11 | </button> |
| 12 | <button type="button" data-val="3" class="btn btn-link p-0 text-decoration-none" style="font-size:28px;color:#333"> |
| 13 | ★ |
| 14 | </button> |
| 15 | <button type="button" data-val="2" class="btn btn-link p-0 text-decoration-none" style="font-size:28px;color:#333"> |
| 16 | ★ |
| 17 | </button> |
| 18 | <button type="button" data-val="1" class="btn btn-link p-0 text-decoration-none" style="font-size:28px;color:#333"> |
| 19 | ★ |
| 20 | </button> |
| 21 | </div> |
| 22 | <span data-label style="color:#808080;font-size:12px"> |
| 23 | 3 / 5 |
| 24 | </span> |
| 25 | </div> |
| 26 | <script> |
| 27 | (function(){document.querySelectorAll('[data-rating]').forEach(w=>{const stars=w.querySelectorAll('[data-val]');const label=w.querySelector('[data-label]');let current=3;const apply=v=>{stars.forEach(s=>{s.style.color=+s.dataset.val |
| 28 | <=v?'#EAB308':'#333'});if(label)label.textContent=v+' / 5'};stars.forEach(s=> |
| 29 | {s.addEventListener('mouseenter',()=>apply(+s.dataset.val));s.addEventListener('mouseleave',()=>apply(current));s.addEventListener('click',()=>{current=+s.dataset.val;apply(current)})});apply(current)})})(); |
| 30 | </script> |
Accessibility
Accessible forms help all users complete tasks. Use semantic elements, clear labels, and visible focus indicators.
- Associate every input with a <label> using the for attribute.
- Mark required fields with aria-required="true" and invalid fields with aria-invalid="true".
- Ensure focus styles are visible (outline or ring) on all interactive controls.
- Use aria-describedby to connect helper text or error messages.
- Keep custom controls keyboard operable; toggles should respond to Space, sliders to arrow keys.
- Provide accessible names for icon-only buttons inside input groups.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.