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
<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.
<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:
<BaseInput inputClasses="form-control-flush" placeholder="form-control-flush" />Muted
Remove all borders and shadows so you can use it inside other elements:
<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.
<Card noBody className="card">
<div class="card-body">
<form>
<BaseInput
label="Email address"
placeholder="[email protected]" />
<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
<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
<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="[email protected]"
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
<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" /><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
<BaseCheckbox model={checkboxes.unchecked} class="mb-3">
Check this custom checkbox
</BaseCheckbox>Radios
<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
<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
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
<BaseSwitch
onText="" offText=""
className="mr-1"
type="primary" />Labeled toggles
<BaseSwitch
className="mr-1"
model={switches.primary}
type="primary" />Sliders
<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>