Gov Design System CE - Templates

Search 

<form role="search" id="search" class="gov-search">
    <gov-form-control>
        <gov-form-search size="m" color="neutral" aria-autocomplete="list" aria-haspopup="menu" aria-controls="suggestions" aria-expanded="true">
            <gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, obsahu..." aria-label="Vyhledávání v obsahu webu" input-type="search">
                <gov-icon type="templates" name="search" slot="icon-start"></gov-icon>
            </gov-form-input>
            <gov-button color="neutral" size="s" type="base" aria-label="Odstranit zadaný výraz" slot="button">
                <gov-icon type="templates" name="x" slot="icon-start"></gov-icon>

            </gov-button>
            <gov-button color="primary" size="s" type="solid" aria-label="Vyhledat zadaný výraz" native-type="submit" slot="button">
                <gov-icon type="templates" name="search" slot="icon-start"></gov-icon>

            </gov-button>
        </gov-form-search>
    </gov-form-control>
</form>
 
<form role="search" id="search" class="gov-search{{#if classes}} {{#each classes}}{{ this }}{{/each}}{{/if}}">
    <gov-form-control>
        {{#if label }}
        <gov-form-label size="m">{{ label }}</gov-form-label>
        {{/if}}
        <gov-form-search size="{{ size }}" color="{{ color }}" aria-autocomplete="list" aria-haspopup="menu" aria-controls="suggestions" aria-expanded="true">
            <gov-form-input slot="input" size="{{ input/size }}" placeholder="{{ input/placeholder }}" aria-label="{{ input/aria-label }}" input-type="search">
                {{#if input/icon-start}}
                    {{ render '@icon' input/icon-start }}
                {{/if}}
            </gov-form-input>
            {{#each button}}
                {{ render '@button' this }}
            {{/each}}
        </gov-form-search>
        {{#if suggestions}}
            <div class="gov-desktop-only">
                {{ render '@suggestions' this merge=true }}
            </div>
        {{/if}}
    </gov-form-control>
</form>
 
{
  "size": "m",
  "color": "neutral",
  "input": {
    "placeholder": "Hledejte v názvu, obsahu...",
    "aria-label": "Vyhledávání v obsahu webu",
    "size": "m",
    "icon-start": {
      "slot": "icon-start",
      "type": "templates",
      "name": "search"
    }
  },
  "button": [
    {
      "slot": "button",
      "size": "s",
      "color": "neutral",
      "type": "base",
      "aria-label": "Odstranit zadaný výraz",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "x"
      }
    },
    {
      "slot": "button",
      "size": "s",
      "color": "primary",
      "type": "solid",
      "aria-label": "Vyhledat zadaný výraz",
      "native-type": "submit",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "search"
      }
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

.gov-search {
    position: relative;
    *[slot="button"] {
        display: none;
    }

    @include mq($from: md) {
        &--fixed-width {
            width: rem-calc(424);
        }
        *[slot="button"] {
            display: flex;
        }
        *[slot="input"] *[slot="icon-start"] {
            display: none;
        }
    }
}
  • URL: /components/raw/search/search.scss
  • Filesystem Path: src/components/molecules/search/search.scss
  • Size: 379 Bytes

No notes defined.