@create-figma-plugin/ui/lib/components/search-textbox/search-textbox.module.css

Production-grade Preact components that replicate the Figma UI design

.searchTextbox {
  position: relative;
  z-index: var(--z-index-1);
}

.input {
  display: block;
  width: 100%;
  height: var(--space-32);
  padding: var(--space-0) var(--space-32);
  border-radius: var(--border-radius-6);
  background-color: var(--figma-color-bg-secondary);
  color: var(--figma-color-text);
  cursor: text;
}
.disabled .input {
  color: var(--figma-color-text-disabled);
  cursor: not-allowed;
}
.input::placeholder {
  color: var(--figma-color-text-tertiary);
}

.searchIcon {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  color: var(--figma-color-icon-secondary);
  pointer-events: none; /* so that clicking the icon focuses the textbox */
}
.disabled .searchIcon {
  color: var(--figma-color-icon-disabled);
}
.input:focus ~ .searchIcon {
  color: var(--figma-color-icon);
}

.clearButton {
  position: absolute;
  top: var(--space-0);
  right: var(--space-0);
  width: var(--space-32);
  height: var(--space-32);
  padding: calc(var(--space-4) - var(--border-width-1));
  color: var(--figma-color-icon-secondary);
}
.searchTextbox:not(.disabled) .clearButton:hover,
.searchTextbox:not(.disabled) .clearButton:focus-visible {
  color: var(--figma-color-icon);
}
.disabled .clearButton {
  color: var(--figma-color-icon-disabled);
}

.clearButtonBox {
  display: block;
  border: var(--border-width-1) solid transparent;
  border-radius: var(--border-radius-4);
}
.searchTextbox:not(.disabled) .clearButton:focus-visible .clearButtonBox {
  border-color: var(--figma-color-border-selected);
}
.clearButtonBox svg {
  display: block;
}