input search
The search input element let the user enter search queries into.
According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the search input.
This component works with all its features only in browsers that have support for the
If you need to run this component in a browser with no support for the
:has
CSS selector. Please refer to the
reference on MDN.
If you need to run this component in a browser with no support for the
:has
CSS selector, please use the
FROK Release 3.6.x.
table of content
- description
- component variations
- input search
- input search disabled
- input search readonly
- input search with label
- input search with label disabled
- input search with label readonly
- input search with very long label
- input search with very long label disabled
- input search with very long label readonly
- input search with placeholder
- input search with placeholder disabled
- input search with placeholder readonly
- input search with placeholder and label
- input search with placeholder and label disabled
- input search with placeholder and label readonly
- additional content
- style scss
component variations
input search
<div class="a-search-input">
<input type="search" id="search-input-1" name="input search" />
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search disabled
<div class="a-search-input">
<input
type="search"
id="search-input-2"
name="input search disabled"
disabled=""
/>
<button
type="submit"
class="a-search-input__icon-search"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search readonly
<div class="a-search-input">
<input
type="search"
id="search-input-3"
name="input search readonly"
readonly=""
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with label
<div class="a-search-input">
<label for="search-input-4">label</label>
<input type="search" id="search-input-4" name="input search with label" />
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with label disabled
<div class="a-search-input">
<label for="search-input-5">label</label>
<input
type="search"
id="search-input-5"
name="input search with label disabled"
disabled=""
/>
<button
type="submit"
class="a-search-input__icon-search"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with label readonly
<div class="a-search-input">
<label for="search-input-6">label</label>
<input
type="search"
id="search-input-6"
name="input search with label readonly"
readonly=""
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with very long label
<div class="a-search-input">
<label for="search-input-7">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="search"
id="search-input-7"
name="input search with very long label"
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with very long label disabled
<div class="a-search-input">
<label for="search-input-8">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="search"
id="search-input-8"
name="input search with very long label disabled"
disabled=""
/>
<button
type="submit"
class="a-search-input__icon-search"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with very long label readonly
<div class="a-search-input">
<label for="search-input-9">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="search"
id="search-input-9"
name="input search with very long label readonly"
readonly=""
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with placeholder
<div class="a-search-input">
<input
type="search"
id="search-input-10"
name="input search with placeholder"
placeholder="e.g.: hint"
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with placeholder disabled
<div class="a-search-input">
<input
type="search"
id="search-input-11"
name="input search with placeholder disabled"
placeholder="e.g.: hint"
disabled=""
/>
<button
type="submit"
class="a-search-input__icon-search"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with placeholder readonly
<div class="a-search-input">
<input
type="search"
id="search-input-12"
name="input search with placeholder readonly"
placeholder="e.g.: hint"
readonly=""
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with placeholder and label
<div class="a-search-input">
<label for="search-input-13">label</label>
<input
type="search"
id="search-input-13"
name="input search with placeholder and label"
placeholder="e.g.: hint"
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with placeholder and label disabled
<div class="a-search-input">
<label for="search-input-14">label</label>
<input
type="search"
id="search-input-14"
name="input search with placeholder and label disabled"
placeholder="e.g.: hint"
disabled=""
/>
<button
type="submit"
class="a-search-input__icon-search"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
input search with placeholder and label readonly
<div class="a-search-input">
<label for="search-input-15">label</label>
<input
type="search"
id="search-input-15"
name="input search with placeholder and label readonly"
placeholder="e.g.: hint"
readonly=""
/>
<button
type="submit"
class="a-search-input__icon-search"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-search"></i>
</button>
<button type="button" class="a-search-input__icon-close">
<i class="a-icon ui-ic-close-small"></i>
</button>
</div>
additional content
Instance API
The instance API can be accessed by the component
property of the searchForm element.
Method | parameter | description |
---|---|---|
setAlwaysShowCloseButton(show) |
show: boolean |
wether to always show the close button or not, independent from the input value |
styles SCSS
.a-search-input {
display: flex;
flex: 1;
height: 3rem;
position: relative;
width: auto;
&__icon-close,
&__icon-search {
align-items: center;
background-color: var(--neutral__enabled__fill__default);
color: var(--neutral__enabled__front__default);
border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);
display: none;
height: 3rem;
justify-content: center;
width: 3rem;
&:hover:not(:disabled) {
cursor: pointer;
background-color: var(--neutral__enabled__fill__hovered);
}
&:active:not(:disabled) {
background-color: var(--neutral__enabled__fill__pressed);
}
&:focus-visible {
@include focus-inside;
}
}
&__icon-close {
order: 1;
}
&__icon-search {
order: 2;
}
&.--close-visible &__icon-close {
display: flex;
}
&__icon-search {
display: flex;
&:disabled {
color: var(--neutral__disabled__front__default);
border-bottom-color: var(--neutral__disabled__front__default);
background-color: var(--neutral__disabled__fill__default);
pointer-events: none;
}
}
input {
background-color: var(--neutral__enabled__fill__default);
border: 0;
border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);
color: var(--neutral__enabled__front__default);
height: 3rem;
padding-inline: 1rem;
width: 100%;
&[readonly],
&[readonly] ~ .a-search-input__icon-search,
&:focus[readonly] {
background-color: var(--plain__enabled__fill__default);
pointer-events: none;
}
&::placeholder {
color: var(--plain__enabled__front__default);
opacity: 0.5;
}
&:hover,
&:hover ~ .a-search-input__icon-close,
&:hover + .a-search-input__icon-search {
background-color: var(--neutral__enabled__fill__hovered);
}
&:focus:not(:disabled, :read-only),
&:focus:not(:read-only) ~ .a-search-input__icon-close:not(:hover),
&:focus:not(:read-only) + .a-search-input__icon-search:not(:hover) {
background-color: var(--neutral__focused__fill__default);
border-bottom-color: var(--neutral__focused__front__default);
}
&:focus,
&:focus ~ .a-search-input__icon-close:not(:hover),
&:focus + .a-search-input__icon-search:not(:hover) {
background-color: var(--neutral__focused__fill__default);
border-bottom-color: var(--neutral__focused__front__default);
}
&:focus-visible {
border: 3px solid var(--plain__enabled__front__default);
outline: 3px solid var(--background);
outline-offset: -6px;
padding-inline: 13px;
padding-block-end: 3px;
}
&:disabled {
border-bottom-color: var(--neutral__disabled__front__default);
background-color: var(--neutral__disabled__fill__default);
pointer-events: none;
&::placeholder {
color: var(--neutral__disabled__front__default);
}
}
}
label {
margin: 0.25rem 1rem auto;
max-width: calc(100% - 4.5rem);
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
white-space: nowrap;
&:has(~ input:disabled) {
color: var(--neutral__disabled__front__default);
}
+ input {
padding-top: 1.125rem;
padding-bottom: 0.3125rem;
&:focus-visible {
padding-block-end: 0.375rem;
}
}
}
&.--close-visible label {
max-width: calc(100% - 7rem);
}
}