Svelte Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of Svelte forms.

Inputs

Default

Copy

<BaseInput placeholder="Default input" />

Alternative

If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.

Copy

<div class="p-4 bg-secondary">
  <BaseInput placeholder="Alternative input" />
</div>

Flush

Remove all borders and shadows so you can use it inside other elements:

Copy

<BaseInput inputClasses="form-control-flush" placeholder="form-control-flush" />

Muted

Remove all borders and shadows so you can use it inside other elements:

Copy

<BaseInput inputClasses="form-control-muted" placeholder="form-control-muted" />

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

For all form control you can apply the additional modifier classes explained in the Inputs section: .form-control-alternative, .form-control-flush and .form-control-muted.

Copy

<Card noBody className="card">
  <div class="card-body">
    <form>
      <BaseInput
        label="Email address"
        placeholder="name@example.com" />

      <BaseInput label="Example select">
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </BaseInput>

      <BaseInput label="Example multiple select">
        <select multiple class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </BaseInput>

      <BaseInput label="Example texarea">
        <textarea
          class="form-control"
          id="exampleFormControlTextarea3"
          row="3" />
      </BaseInput>
    </form>
  </div>
</Card>

File browser

Copy

<Card noBody className="card">
  <div slot="header">
    <h3 class="mb-0">File browser</h3>
  </div>
  <!-- Card body -->
  <div class="card-body">
    <form>
      <FileInput />
    </form>
  </div>
</Card>

HTML5 inputs

Text

URL

Phone

Password

Number

Datetime

Date

Month

Week

Time

Color

Copy

<Card noBody className="card">
  <!-- Card body -->
  <div class="card-body">
    <form>
      <div class="row form-group">
        <label class="col-md-2 col-form-label form-control-label">
          Text
        </label>
        <div class="col-md-10">
          <BaseInput placeholder="Jon Snow" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-search-input"
          class="col-md-2 col-form-label form-control-label">
          Search
        </label>
        <div class="col-md-10">
          <BaseInput
            id="example-search-input"
            placeholder="Tell me your secret..." />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-email-input"
          class="col-md-2 col-form-label form-control-label">
          Email
        </label>
        <div class="col-md-10">
          <BaseInput
            type="email"
            autocomplete="username email"
            placeholder="argon@example.com"
            id="example-email-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-tel-input"
          class="col-md-2 col-form-label form-control-label">
          Phone
        </label>
        <div class="col-md-10">
          <BaseInput
            type="tel"
            placeholder="40-(770)-888-444"
            id="example-tel-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-password-input"
          class="col-md-2 col-form-label form-control-label">
          Phone
        </label>
        <div class="col-md-10">
          <BaseInput
            type="password"
            autocomplete="current-password"
            placeholder="password"
            id="example-password-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-number-input"
          class="col-md-2 col-form-label form-control-label">
          Number
        </label>
        <div class="col-md-10">
          <BaseInput
            type="number"
            placeholder="23"
            id="example-number-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-datetime-local-input"
          class="col-md-2 col-form-label form-control-label">
          Datetime
        </label>
        <div class="col-md-10">
          <BaseInput
            type="datetime-local"
            value="2018-11-23T10:30:00"
            id="example-datetime-local-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-date-input"
          class="col-md-2 col-form-label form-control-label">
          Date
        </label>
        <div class="col-md-10">
          <BaseInput
            type="date"
            value="2018-11-23"
            id="example-date-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-month-input"
          class="col-md-2 col-form-label form-control-label">
          Month
        </label>
        <div class="col-md-10">
          <BaseInput
            type="month"
            value="2018-11"
            id="example-month-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-week-input"
          class="col-md-2 col-form-label form-control-label">
          Week
        </label>
        <div class="col-md-10">
          <BaseInput
            type="week"
            value="2018-W23"
            id="example-week-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-time-input"
          class="col-md-2 col-form-label form-control-label">
          Time
        </label>
        <div class="col-md-10">
          <BaseInput
            type="time"
            value="10:30:00"
            id="example-time-input" />
        </div>
      </div>
      <div class="row form-group">
        <label
          for="example-color-input"
          class="col-md-2 col-form-label form-control-label">
          Color
        </label>
        <div class="col-md-10">
          <BaseInput
            type="color"
            value="#5e72e4"
            id="example-color-input" />
        </div>
      </div>
    </form>
  </div>
</Card>

Sizing

Copy

<BaseInput
  label="Large input"
  inputClasses="form-control-lg"
  placeholder=".form-control-lg" />
<BaseInput label="Default input" placeholder="Default input" />
<BaseInput
  label="Small input"
  inputClasses="form-control-sm"
  placeholder=".form-control-sm" />

Copy

<BaseInput>
  <select class="form-control form-control-lg" id="exampleFormControlSelect1">
    <option>Large select</option>
  </select>
</BaseInput>

<BaseInput>
  <select class="form-control" id="exampleFormControlSelect1">
    <option>Default select</option>
  </select>
</BaseInput>

<BaseInput>
  <select class="form-control form-control-sm" id="exampleFormControlSelect1">
    <option>Small select</option>
  </select>
</BaseInput>

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes

Check this custom checkbox

Copy

<BaseCheckbox model={checkboxes.unchecked} class="mb-3">
    Check this custom checkbox
</BaseCheckbox>

Radios

Toggle this custom radio

Or toggle this other custom radio

Copy

<BaseRadio
  model={radios.radio1}
  name={radios.radio1}
  on:click={updateRadio1}
  class="mb-3">
  Toggle this custom radio
</BaseRadio>
<BaseRadio
  model={radios.radio1}
  name={radios.radio2}
  on:click={updateRadio2}
  class="mb-3">
  Or toggle this other custom radio
</BaseRadio>

Inline

Toggle this custom radio

Or toggle this other custom radio

Copy

<div class="custom-control custom-radio custom-control-inline">
  <BaseRadio
    model={radios.radio1}
    name={radios.radio1}
    on:click={updateRadio1}
    class="mb-3">
    Unchecked
  </BaseRadio>
  <BaseRadio
    model={radios.radio1}
    name={radios.radio2}
    on:click={updateRadio2}
    class="mb-3">
    Checked
  </BaseRadio>
</div>

Disabled

Check this custom checkbox

Toggle this custom radio

Copy

BaseCheckbox
  model={checkboxes.checked}
  disabled
  class="mb-3">
  Check this custom checkbox
</BaseCheckbox>
<BaseRadio
  model={radios.radio2}
  disabled
  name="unchecked"
  class="mb-3">
  Toggle this custom radio
</BaseRadio>

Toggles

Copy

<BaseSwitch
  onText="" offText=""
  className="mr-1"
  type="primary" />

Labeled toggles

Copy

<BaseSwitch
  className="mr-1"
  model={switches.primary}
  type="primary" />

Sliders

100.00

200.00

400.00

Copy

<BaseSlider model={sliders.simple} min={0} value={50} max={100} />

<div class="row mt-3">
  <div class="col-6">
    <span class="range-slider-value">{sliders.simple}</span>
  </div>
</div>

<BaseSlider
  className="mt-5"
  model={sliders.range}
  min={0}
  value={200}
  max={400} />

<div class="row mt-3">
  <div class="col-6">
    <span class="range-slider-value">{sliders.range[0]}</span>
  </div>
  <div class="col-6 text-right">
    <span class="range-slider-value value-high">
      {sliders.range[1]}
    </span>
  </div>
</div>