FormSettings Forms

---
// FormSettings, recovered from blurr-components.pages.dev
---

<section class="fst"> <div class="fst__inner"> <h1 class="fst__headline">Accountinstellingen</h1> <div class="fst__card"> <h2 class="fst__card-title">Persoonlijke gegevens</h2> <form class="fst__form" novalidate> <div class="fst__row"> <div class="fst__field"> <label class="fst__label" for="fst-voornaam">Voornaam</label> <input class="fst__input" id="fst-voornaam" type="text" placeholder="Marc"> </div> <div class="fst__field"> <label class="fst__label" for="fst-achternaam">Achternaam</label> <input class="fst__input" id="fst-achternaam" type="text" placeholder="Janssen"> </div> </div> <div class="fst__field"> <label class="fst__label" for="fst-email">E-mailadres</label> <input class="fst__input" id="fst-email" type="email" placeholder="marc@bedrijf.nl"> </div> <div class="fst__field"> <label class="fst__label" for="fst-tel">Telefoonnummer</label> <input class="fst__input" id="fst-tel" type="tel" placeholder="+31 6 12 34 56 78"> </div> <div class="fst__actions"> <button class="fst__btn" type="submit">Opslaan</button> </div> </form> </div> <div class="fst__card"> <h2 class="fst__card-title">Wachtwoord wijzigen</h2> <form class="fst__form" novalidate> <div class="fst__field"> <label class="fst__label" for="fst-pw-huidig">Huidig wachtwoord</label> <input class="fst__input" id="fst-pw-huidig" type="password" placeholder="••••••••"> </div> <div class="fst__row"> <div class="fst__field"> <label class="fst__label" for="fst-pw-nieuw">Nieuw wachtwoord</label> <input class="fst__input" id="fst-pw-nieuw" type="password" placeholder="••••••••"> </div> <div class="fst__field"> <label class="fst__label" for="fst-pw-bevestig">Bevestig wachtwoord</label> <input class="fst__input" id="fst-pw-bevestig" type="password" placeholder="••••••••"> </div> </div> <div class="fst__actions"> <button class="fst__btn" type="submit">Wachtwoord bijwerken</button> </div> </form> </div> <div class="fst__card"> <h2 class="fst__card-title">Notificaties</h2> <div class="fst__toggles"> <label class="fst__toggle" for="fst-t1"> <span class="fst__toggle-label">Wekelijkse rapportages per e-mail</span> <span class="fst__toggle-track"> <input class="fst__toggle-input" id="fst-t1" type="checkbox" checked> <span class="fst__toggle-thumb"></span> </span> </label><label class="fst__toggle" for="fst-t2"> <span class="fst__toggle-label">Nieuwe campagne-inzichten</span> <span class="fst__toggle-track"> <input class="fst__toggle-input" id="fst-t2" type="checkbox" checked> <span class="fst__toggle-thumb"></span> </span> </label><label class="fst__toggle" for="fst-t3"> <span class="fst__toggle-label">Factuurbeheer-meldingen</span> <span class="fst__toggle-track"> <input class="fst__toggle-input" id="fst-t3" type="checkbox"> <span class="fst__toggle-thumb"></span> </span> </label><label class="fst__toggle" for="fst-t4"> <span class="fst__toggle-label">Marketing-nieuwsbrief</span> <span class="fst__toggle-track"> <input class="fst__toggle-input" id="fst-t4" type="checkbox"> <span class="fst__toggle-thumb"></span> </span> </label> </div> </div> </div> </section>

<style>
.fst{background:#f9f9fb;padding:3rem 1.5rem;min-height:100vh}
.fst__inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}
.fst__headline{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0}
.fst__card{background:#fff;border:1px solid #ececec;border-radius:12px;padding:1.75rem}
.fst__card-title{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem;padding-bottom:.75rem;border-bottom:1px solid #f0f0f0}
.fst__form{display:flex;flex-direction:column;gap:1rem}
.fst__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fst__field{display:flex;flex-direction:column;gap:.35rem}
.fst__label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#666}
.fst__input{padding:.65rem .9rem;border:1.5px solid #e0e0e0;border-radius:7px;font-size:.93rem;color:var(--color-primary, #0a0a0a);background:#fafafa;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fst__input:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fst__actions{display:flex;justify-content:flex-end}
.fst__btn{padding:.7rem 1.5rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:7px;font-size:.88rem;font-weight:600;cursor:pointer;transition:opacity .2s;font-family:inherit}
.fst__btn:hover{opacity:.88}
.fst__toggles{display:flex;flex-direction:column;gap:.5rem}
.fst__toggle{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;cursor:pointer;gap:1rem}
.fst__toggle-label{font-size:.9rem;color:var(--color-primary, #0a0a0a)}
.fst__toggle-track{position:relative;width:42px;height:24px;flex-shrink:0}
.fst__toggle-input{opacity:0;width:0;height:0;position:absolute}
.fst__toggle-thumb{position:absolute;inset:0;background:#e0e0e0;border-radius:99px;transition:background .2s;cursor:pointer}
.fst__toggle-thumb:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}
.fst__toggle-input:checked+.fst__toggle-thumb{background:var(--color-accent, #6366f1)}
.fst__toggle-input:checked+.fst__toggle-thumb:after{transform:translate(18px)}
.fst__row{grid-template-columns:1fr}
</style>