Inputs

Form controls for text entry and selection.

Text Input

<input type="text" class="sw-input" placeholder="Enter text...">

With Label

<label class="sw-label">Email Address</label>
<input type="email" class="sw-input" placeholder="you@example.com">

Input Group

Combine input with icons or buttons.

<div class="sw-input-group">
  <svg>...</svg>
  <input type="text" class="sw-input" placeholder="Search...">
</div>

Textarea

<textarea class="sw-textarea" placeholder="Enter description..."></textarea>

Select

<select class="sw-select">
  <option>Select option...</option>
  <option>Option 1</option>
</select>

Checkbox

<label class="sw-checkbox">
  <input type="checkbox">
  <span>Remember me</span>
</label>

Toggle

On/off switch for binary settings.

<div class="sw-toggle"></div>
<div class="sw-toggle on"></div>

Toggle with Label

<label class="sw-toggle-label">
  <div class="sw-toggle"></div>
  <span>Enable notifications</span>
</label>

Select Options (Card Style)

Radio buttons styled as selectable cards.

<div class="sw-select-option selected">
  <input type="radio" name="brand" class="sw-radio" checked>
  <label>Brand A - Cardiovascular</label>
</div>
<div class="sw-select-option">
  <input type="radio" name="brand" class="sw-radio">
  <label>Brand B - Oncology</label>
</div>

Checkboxes (Grid)

Checkbox cards in a grid layout for multi-select.

<div class="sw-select-option selected">
  <input type="checkbox" class="sw-checkbox" checked>
  <label>Healthcare Providers</label>
</div>

CSS

.sw-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--sw-bg-input);
  border: 1.5px solid var(--sw-border-default);
  border-radius: var(--sw-radius-lg);
  font-family: var(--sw-font-family);
  font-size: var(--sw-text-md);
  color: var(--sw-text-primary);
  transition: all var(--sw-transition-fast);
}

.sw-input:focus {
  outline: none;
  background: var(--sw-bg-input-focus);
  border-color: var(--sw-border-focus);
}

.sw-input::placeholder {
  color: var(--sw-text-muted);
}

.sw-label {
  display: block;
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sw-space-1);
}

.sw-input-group {
  display: flex;
  align-items: center;
  gap: var(--sw-space-2);
  padding: 0 var(--sw-space-3);
  background: var(--sw-bg-input);
  border: 1.5px solid var(--sw-border-default);
  border-radius: var(--sw-radius-lg);
}

.sw-input-group .sw-input {
  border: none;
  padding-left: 0;
  background: transparent;
}