Form

Svelte

<form class="form">
  <FieldGroup accent="" focusWithIn>
    <Field label="Text">
      <input type="text" bind:value="{data.text}" />
    </Field>

    <Field label="Number">
      <input type="number" bind:value="{data.number}" />
    </Field>

    <Field label="Textarea">
      <textarea rows="8" bind:value="{data.textarea}" />
    </Field>

    <Field label="Select">
      <select bind:value="{data.select}">
        <option value="">{''}</option>
        {#each ["A", "B"] as val}
        <option value="{val}">{val}</option>
        {/each}
      </select>
    </Field>

    <Field>
      <div slot="label" class="lt"><b>File</b> (input)</div>
      <input type="file" accept="image/png, image/jpeg" />
    </Field>

    <BoxField label="Checkbox :">
      <BoxFieldEntry type="checkbox">
        <b slot="label">CSS</b>
        <input type="checkbox" bind:group="{data.checkbox}" value="CSS" />
      </BoxFieldEntry>

      {#each ['HTML', 'JS'] as val}
      <BoxFieldEntry label="{val}">
        <input type="checkbox" bind:group="{data.checkbox}" value="{val}" />
      </BoxFieldEntry>
      {/each}
    </BoxField>

    <BoxField accent="{data.radio}" rows>
      <div slot="label" class="lt">Radio <b> (& rows)</b></div>

      {#each ["A", "B"] as val}
      <BoxFieldEntry label="{val.toUpperCase()}">
        <input type="radio" bind:group="{data.radio}" value="{val}" />
      </BoxFieldEntry>
      {/each}
    </BoxField>
  </FieldGroup>
</form>

<form class="form">
  <FieldGroup accent="" focusWithIn>
    <!-- text, number, textarea, select ... -->
    <Field label="TITLE">
      <input type="" />
    </Field>
    <!-- or -->
    <Field>
      <b slot="label">TITLE</b>
      <input type="" />
    </Field>

    <!-- checkbox | radio -->
    <BoxField label="Checkbox :">
      <BoxFieldEntry label="MARK">
        <input />
      </BoxFieldEntry>
      <!-- or -->
      <BoxFieldEntry>
        <div slot="label"><b>MARK</b></div>
        <input />
      </BoxFieldEntry>
    </BoxField>
  </FieldGroup>
</form>

HTML

<form class="form">
  <div class="field-group alpha">
    <label class="field ">
      <i>Text</i>
      <input type="text" />
    </label>

    <label class="field ">
      <i>Number</i>
      <input type="number" />
    </label>

    <label class="field ">
      <i>Textarea</i>
      <textarea rows="8"></textarea>
    </label>

    <label class="field ">
      <i>Select</i>
      <select>
        <option value=""></option>
        <option value="base">base</option>
      </select>
    </label>

    <label class="field ">
      <strong class="lt">File</strong>
      <input type="file" accept="image/png, image/jpeg" />
    </label>

    <div class="field ">
      <strong>Checkbox :</strong>

      <div class="boxfields">
        <label class="boxfield">
          <input type="checkbox" value="CSS" />
          <div class="boxlabel">CSS</div>
        </label>
      </div>
    </div>

    <div class="field danger">
      <div>Radio :</div>

      <div class="boxfields rows">
        <label class="boxfield">
          <input type="radio" name="" value="CSS" />
          <div class="boxlabel">CSS</div>
        </label>

        <label class="boxfield">
          <input type="radio" name="" value="HTML" required />
          <div class="boxlabel">HTML</div>
        </label>
      </div>
    </div>
  </div>
</form>

Customize CSS

.form {
  --field-group-focus-within-shadow-size: 0 0 0.8rem -0.2rem;
}

Loader

Variations