In progress

SearchInput

A Search Input allows users to find the content they need from a service by entering keywords, supporting those who may not be able to locate the desired content through navigation alone.

• Figma
• Storybook
• Edit this page
• Create a new issue

Search

Code example

import { SearchInput, SearchSubmitButton } from '@yleisradio/yds-components-react';
import { CloseSmall } from '@yleisradio/yds-icons-react';

<SearchInput
  id="search-basic"
  label="Search"
  placeholder="Search articles"
  name="q"
  submitButton={<SearchSubmitButton aria-label="Search" />}
  iconClear={{ componentFn: CloseSmall, ariaLabel: 'Clear search', onClick: () => {} }}
/>

Why to use

The Search Input helps users quickly locate specific content when navigation alone is not sufficient. It enhances usability and supports accessibility by allowing users to find information using familiar search interaction patterns. It provides users with a direct way to find content on a page, application, or service, offers an alternative to browsing for those who may not know where to look, and improves efficiency for returning users who already know what they want to find.

When to use

Use a SearchInput when users need to find content by typing keywords — especially in services with large content sets where navigation alone is not enough. It works well in global search bars, page-level filtering, and any context where users already know what they want to find. SearchInput supports a familiar pattern (type → submit → results) and complements navigation by offering a direct way to locate content.

Do

• Use when users must quickly locate content from large datasets.
• Place in global search areas, headers or page-level filters.
• Provide a clear visible or visually hidden label for accessibility.
• Use full width on mobile for comfortable typing.
• Use when a dedicated submit action is required (not instant filtering).

Don’t

• Don’t use SearchInput to choose predefined options — use Select or Combobox.
• Don’t rely on placeholder text alone to communicate purpose.
• Don’t place SearchInput where search isn’t relevant or needed.
• Don’t hide the label without providing an accessible name.

Content Guidelines

SearchInput text should help users enter effective search terms quickly. Wording must be concise, familiar, and action-oriented.

Do

• Use short, recognizable labels (e.g., “Haku”, “Hae artikkeleita”).
• Write placeholder text that provides an example (e.g., “Hae artikkeleita”, “Kirjoita hakusana”).
• Make submit button labels explicit (e.g., “Hae”, “Etsi”).
• Provide helper text when the search scope may be unclear (e.g., “Hakee vain ohjelmista”).
• Keep surrounding text short and scannable.

Don’t

• Don’t use vague labels like “Etsi” without context.
• Don’t duplicate label text in the placeholder.
• Don’t use long or overly instructional placeholders.
• Don’t include technical jargon in search descriptions.
• Don’t place strict rules (e.g., “Kirjoita vähintään 3 merkkiä”) in the placeholder — use helper text instead.

Anatomy

1. Search text – Example text inside the field.
2. Search field (input) – Area where the user types the query.
3. Clear button – Appears when text is present; clears the field.
4. Search button – Always visible; triggers the search action.

Key Props

Use the following props to customize the SearchInput component to fit your needs.

SearchInput extends TextInput, so it also supports all TextInput props.

submitButton

Provides an explicit search action. Use the supplied <SearchSubmitButton /> or a custom button.

Type	Example	Description
ReactNode	Search	Renders actionable search trigger at end of field.

Code example

<SearchInput
  id="submit-button"
  label="Search"
  placeholder="Search articles"
  submitButton={<SearchSubmitButton aria-label="Search" />}
/>

iconClear

Shows a clickable icon to clear the current value when present.

Type	Example	Description
InputIconProps	Search	Clears the input.

Code example

<SearchInput
  id="s-clear"
  label="Search"
  value="term"
  submitButton={<SearchSubmitButton aria-label="Search" />}
  iconClear={{ componentFn: CloseSmall, ariaLabel: 'Clear search', onClick: () => {} }}
/>

SearchSubmitButton component

Helper button that displays a search icon or spinner.

Prop	Type	Default	Description
isDisabled	boolean	false	Non-interactive state; sets aria-disabled.
loading	boolean	false	Shows spinner instead of icon; adds aria-busy.

Code example

<SearchSubmitButton aria-label="Search" />
<SearchSubmitButton loading aria-label="Searching" />
<SearchSubmitButton isDisabled aria-label="Search" />

Behavior

• The label identifies the purpose of the input and can be visually hidden but must be programmatically associated.
• The placeholder provides optional visual guidance for sighted users.
• The search button is always visible and performs a search action when clicked or when pressing Enter.
• The clear button allows users to delete entered text.
• The component supports keyboard navigation for all focusable elements.
• The loading state visually communicates that the search process is ongoing.
• The disabled state prevents interaction and visually dims the component.

Accessibility

• Pressing Enter or clicking the search button performs the search. The user is taken to a search results page or results are displayed dynamically on the same page.
  (WCAG 2.1.1 — Keyboard).
• The magnifying glass icon is a widely recognized symbol and doesn’t need to include the word “search” visually. However, it must have an accessible label for screen readers.
  (WCAG 3.3.2 — Labels or Instructions).
• Always provide a label — it may be hidden visually, but it must remain accessible. This ensures users of assistive technologies know what the field is for.
  (WCAG 3.3.2 — Labels or Instructions).
• The clear button must be focusable and have a descriptive accessible name such as “Clear search”.
  (WCAG 2.1.1 — Keyboard).

Implementation examples

Basic search inside a form

Search yle.fi

Code example

<form action="https://haku.yle.fi" method="get" role="search">
  <SearchInput
    id="ex-form"
    name="q"
    label="Search site"
    placeholder="Search site"
    submitButton={<SearchSubmitButton aria-label="Search" />}
  />
</form>

Without form (manual handler)

Search

Code example

<SearchInput
  id="ex-nf"
  label="Search"
  placeholder="Type term"
  submitButton={<SearchSubmitButton aria-label="Search" type="button" onClick={() => alert('Search triggered')} />}
  onKeyDown={(e) => { if (e.key === 'Enter') alert('Search triggered'); }}
/>

With clear button

Search

Code example

<SearchInput
  id="ex-clear"
  label="Search"
  value="Initial term"
  placeholder="Search"
  submitButton={<SearchSubmitButton aria-label="Search" />}
  iconClear={{ componentFn: CloseSmall, ariaLabel: 'Clear search', onClick: () => {/* clearing logic */} }}
  onChange={() => {}}
/>

Loading state

Search

Code example

<SearchInput
  id="ex-loading"
  label="Search"
  value="query"
  submitButton={<SearchSubmitButton aria-label="Searching" loading />}
/>

Disabled

Search

Code example

<SearchInput
  id="ex-disabled"
  label="Search"
  placeholder="Search disabled"
  isDisabled
  submitButton={<SearchSubmitButton aria-label="Search" isDisabled />}
/>

API Reference

Props

SearchInput

The SearchInput component accepts all standard HTML <input> attributes in addition to the following props. SearchInput extends TextInput, so it supports all TextInput props except icon:

Prop	Type	Required	Default	Description
submitButton	ReactNode	No	—

SearchSubmitButton

The SearchSubmitButton component accepts all standard HTML <button> attributes in addition to the following props:

Prop	Type	Required	Default	Description
isDisabled	boolean	No	false
loading	boolean	No	false

Type Definitions

SearchInput

export type SearchInputDSProps = Omit<TextInputDSProps, 'icon'>;

export type SearchSubmitButtonDSProps = {
  isDisabled?: boolean;
  loading?: boolean;
};

SearchSubmitButton

export type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & SearchInputDSProps;

export type SearchSubmitButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
  SearchSubmitButtonDSProps;

Related Components

• TextInput: For single-line responses.
• TextArea: For multi-line responses.
• Select: For single-select dropdowns.
• ComboboxSingleSelect: For searchable single-select dropdowns.