Support Form - defuss-shadcn

On this page (2)

Component Skill — components/support-form/component-skill.md

Native basis

A <form>: a topic Select, subject, a description Textarea, priority radios (.mk-support-form-priority), a multiple file input in a drop zone and the reply email; beside it an <aside> with the response time and help links.

Built from

Select, Input, Textarea, Label, Button.

Web Platform APIs

<fieldset><input type="file">:has()Constraint validationContainer queries

Classes

.mk-support-form.mk-support-form-layout.mk-support-form-field.mk-support-form-priority.mk-support-form-drop.mk-support-form-aside.mk-support-form-sla

Data attributes

None.

§Default

Topic, subject, description, priority as a segmented radio group (urgent turns red), attachments in a drop zone around a multiple file input, and the reply email - beside the response time and self-help links from 52rem.

<section class="mk-support-form" aria-labelledby="sp-title">
  <div class="mk-support-form-layout">
    <form action="#" method="post">
      <h2 id="sp-title" style="margin:0;font-size:1.25rem">Contact support</h2>
      <div class="mk-support-form-field"><label class="label" for="sp-topic">Topic</label><select class="select" id="sp-topic" name="topic" required><option value="">Choose a topic</option><option>Billing</option><option>Sync &amp; offline</option><option>Account access</option><option>Something else</option></select></div>
      <div class="mk-support-form-field"><label class="label" for="sp-subj">Subject</label><input class="input" id="sp-subj" name="subject" required></div>
      <div class="mk-support-form-field"><label class="label" for="sp-desc">What happened?</label><textarea class="textarea" id="sp-desc" name="description" rows="5" required placeholder="Steps, what you expected, what you saw…"></textarea></div>
      <fieldset class="mk-support-form-priority"><legend>Priority</legend><div><label><input type="radio" name="priority" value="low">Low</label><label><input type="radio" name="priority" value="normal" checked>Normal</label><label><input type="radio" name="priority" value="urgent">Urgent</label></div></fieldset>
      <label class="mk-support-form-drop" for="sp-files"><i data-lucide="paperclip"></i><strong>Attach screenshots or logs</strong><span>Up to 5 files, 20 MB each</span><input id="sp-files" type="file" name="files" multiple></label>
      <div class="mk-support-form-field"><label class="label" for="sp-mail">Reply to</label><input class="input" id="sp-mail" type="email" name="email" autocomplete="email" required></div>
      <button class="btn" type="submit">Send request</button>
    </form>
    <aside class="mk-support-form-aside" aria-label="Before you write">
      <div class="mk-support-form-sla"><i data-lucide="clock"></i><span><strong>Usually within 4 hours</strong><br>Mon–Fri, 8:00–20:00 CET</span></div>
      <h2>These might help</h2>
      <ul><li><a href="#"><i data-lucide="file-text"></i>Sync is stuck on one device</a></li><li><a href="#"><i data-lucide="file-text"></i>Change your billing email</a></li><li><a href="#"><i data-lucide="file-text"></i>Recover a deleted doc</a></li></ul>
      <p>Status: all systems normal.</p>
    </aside>
  </div>
</section>

§CSS view file

/* -- Support Form (website · Account & States) ----------------------------

   Collects an issue description and supporting attachments - topic, subject, description, priority and files, beside the expected response time and self-help links. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-support-form, .mk-support-form *, .mk-support-form ::before, .mk-support-form ::after) { box-sizing: border-box; }

  .mk-support-form { container: mk-support-form / inline-size; width: 100%; }

  .mk-support-form-layout { display: grid; gap: 2rem; }

  .mk-support-form form { display: grid; gap: 1.125rem; }

  .mk-support-form-field { display: grid; gap: 0.375rem; }

  .mk-support-form-priority { display: grid; gap: 0.375rem; margin: 0; padding: 0; border: 0;

    & legend { margin-block-end: 0.375rem; padding: 0; font-size: 0.875rem; font-weight: 500; }

    & div { display: inline-grid; grid-auto-flow: column; width: fit-content; padding: 0.1875rem; border-radius: var(--radius-md); background: var(--muted); }

    & label { position: relative; padding: 0.375rem 0.875rem; border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; }

    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

    & label:has(:checked) { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }

    & label:has(:checked[value="urgent"]) { color: var(--destructive); }

    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }

  .mk-support-form-drop { display: grid; justify-items: center; gap: 0.25rem; padding: 1.25rem; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: 0.875rem; text-align: center; cursor: pointer;

    & svg { width: 1.25rem; height: 1.25rem; color: var(--foreground); }

    & input { max-width: 100%; font-size: 0.8125rem; }

    &:hover, &:has(input:focus-visible) { border-color: var(--ring); }

  .mk-support-form-aside { display: grid; gap: 1.25rem; align-content: start; padding: 1.5rem; border-radius: var(--radius-xl); background: var(--muted);

    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }

    & p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }

    & ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

    & a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); font-size: 0.875rem; font-weight: 500; text-decoration: none; }

    & a svg { width: 0.875rem; height: 0.875rem; }

  .mk-support-form-sla { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem;

    & svg { width: 1.25rem; height: 1.25rem; color: #15803d; }

  @container mk-support-form (min-width: 52rem) {

    .mk-support-form-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-support-form-drop { border-color: CanvasText; }

    .mk-support-form-priority label:has(:checked) { outline: 2px solid Highlight; }

Comments, ideas or improvements? Edit this page's source on GitHub

Support FormBLK

§CSS view file