Search field

#Example

<label class="search-field max-w-sm">
  <input type="search" class="input" placeholder="Search docs" aria-label="Search docs">
  <kbd class="search-field-shortcut">/</kbd>
</label>

#Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.search-field {
  position: relative;
  display: block;
}

.search-field:focus-within .search-field-shortcut {
  opacity: 0;
}

.search-field-shortcut {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--field-px, .75rem) - .25rem);
  padding: 0 .375rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.25rem;
  color: var(--muted-foreground);
  background-color: var(--muted);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-sm);
  translate: 0 -50%;
  pointer-events: none;
  transition: opacity var(--m-duration-fast);
}

.search-field:focus-within .search-field-shortcut {
  opacity: 0;
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Search field: start from the base class, then add modifiers -->
<label class="search-field max-w-sm">
  <input type="search" class="input" placeholder="Search docs" aria-label="Search docs">
  <kbd class="search-field-shortcut">/</kbd>
</label>

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components