Dcode Design System

Search

No notes defined.

<div class="search">
    <div class="search__icon">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.25 11.25L8.21859 8.21859M8.21859 8.21859C9.01031 7.42687 9.5 6.33312 9.5 5.125C9.5 2.70875 7.54125 0.75 5.125 0.75C2.70875 0.75 0.75 2.70875 0.75 5.125C0.75 7.54125 2.70875 9.5 5.125 9.5C6.33312 9.5 7.42687 9.01031 8.21859 8.21859Z" stroke="#94A3B8" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </div>
    <input type="search" class="search__input placeholder:pl-3" placeholder="Search" required>
</div>
  • Content: 
    .search {
    @apply mb-lgSpace relative;

    .search__icon {
        @apply absolute inset-y-0 left-0 flex items-center px-2 pointer-events-none;
    }

    .search__input {
        @apply block w-full text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 pl-3;
    }
}
  • URL: /components/raw/search/search.pcss
  • Filesystem Path: components/03-elements/search/search.pcss
  • Size: 284 Bytes
  • Content: 
    title: Search
status: wip
variants:
  - name: default
    label: Search
  • URL: /components/raw/search/search.yml
  • Filesystem Path: components/03-elements/search/search.yml
  • Size: 71 Bytes