Swoop Design System

Appearance

Inputs ​

Form inputs are styled with the .sw-form-control class. It applies the design system's surface, border, and text colours, so it adapts automatically to the active theme.

Input group ​

Wrap an input in .sw-input-group to attach an addon to either side — or both. The addon is a .sw-input-group-text element — it shares the input's padding, border, and background, and takes over the outer rounded corners, while the input flexes to fill the remaining width. Markup order determines which side the addon appears on.

html
<div class="sw-input-group">
  <span class="sw-input-group-text">£</span>
  <input class="sw-form-control" type="text" placeholder="Amount" />
  <span class="sw-input-group-text">.00</span>
</div>
£
.swoopfunding.com
£.00

Filled state ​

The background changes once the field has a value, detected via :not(:placeholder-shown). This requires a placeholder attribute — when no visible placeholder is wanted, use placeholder=" " (a single space). Inside an input group, the addon's background follows the input's state.

£

Text input ​

Apply .sw-form-control to a text input.

html
<input class="sw-form-control" type="text" placeholder="Company name" />

Email ​

html
<input class="sw-form-control" type="email" placeholder="email@example.com" />

Password ​

html
<input class="sw-form-control" type="password" placeholder="Password" />

Textarea ​

html
<textarea class="sw-form-control" rows="3" placeholder="Tell us about your business…"></textarea>

Select ​

A <select> also works with .sw-form-control, sharing the filled-state behaviour of the other fields.

html
<select class="sw-form-control">
  <option>Business loan</option>
  <option>Invoice finance</option>
  <option>Asset finance</option>
</select>

Toggle switch ​

A toggle switch for binary on/off settings, built on a native checkbox so it stays keyboard- and screen-reader-accessible. Wrap the input and slider in a <label> so the whole control is clickable. Add the checked attribute to start in the on state.

html
<label class="sw-toggle-switch">
  <input class="sw-toggle-switch__input" type="checkbox" />
  <span class="sw-toggle-switch__slider"></span>
</label>

Disabled ​

Add the disabled attribute to the input. The track greys out and the control stops responding to clicks while keeping its on/off position.

html
<label class="sw-toggle-switch">
  <input class="sw-toggle-switch__input" type="checkbox" disabled />
  <span class="sw-toggle-switch__slider"></span>
</label>