SearchField

Purpose

A search field: a landmark, a label read and not shown, and a button that says its word. A GET form by default, so the search lives in the address; a page that searches in place intercepts the submission.

When to use, when not

Use it above any list that can be searched. Not for a filter among fixed values (RadioGroup or Select), not for a field whose label must be seen (Field).

Anatomy

1. The form, role="search".
2. The hidden label.
3. The field, type="search".
4. The button, with the magnifier and its word.
5. The clear link, when there is a search and an address without it.

Props

Props of SearchField

Name	Type	Default	What it does
id	string		The field's id; the label's `for` is the same value.
label	string		The label, read and not shown: "Rechercher un utilisateur".
placeholder?	string		What the empty field shows; a hint, never the label.
value?	string | undefined		The value; bindable, absent reads as empty.
name?	string	'q'	The parameter's name in the address.
action?	string		Where the form goes; the current address when absent.
buttonLabel?	string	'Rechercher'	The button's text.
onsearch?	(value: string, event: SubmitEvent) => void		For a search done in place: called with the value and the event, which the page prevents.
clearHref?	string		The address of the screen without a search; with a value, a link to it is offered.
clearLabel?	string	'Effacer la recherche'	The clear link's text.

States

In place with the count announced, and with a clear link.

inPlace

The submission is intercepted and the count announced; the label is hidden and read, the button says its word next to the magnifier.

Light

Rechercher dans le guide des composants Rechercher

Dark

Rechercher dans le guide des composants Rechercher

320 px, light

Rechercher dans le guide des composants Rechercher

320 px, dark

Rechercher dans le guide des composants Rechercher

216 px, light

Rechercher dans le guide des composants Rechercher

Forced colours, captured

withClear

With a value and a clear address, a link leads to the screen without a search.

Light

Rechercher un utilisateur Rechercher Effacer la recherche

Dark

Rechercher un utilisateur Rechercher Effacer la recherche

320 px, light

Rechercher un utilisateur Rechercher Effacer la recherche

320 px, dark

Rechercher un utilisateur Rechercher Effacer la recherche

216 px, light

Rechercher un utilisateur Rechercher Effacer la recherche

Forced colours, captured

Accessibility contract

• Role and name: a search landmark; the field named by its label; the button by its text.
• Keyboard, focus: Enter submits; the button is a real button for whoever navigates by pointer or finger.
• Live regions: none here; the page announces the count through LiveRegion when the list updates in place. A GET navigation announces itself by the page’s title.

Content rules

French. The label says what is searched: “Rechercher un utilisateur”. The placeholder is an example, never the label.

Do and don’t

• Do keep the form GET when the list is served by the server; the search then survives a reload and a share.
• Do offer clearHref on a server-searched list, so a user can leave the search in one move.
• Do not put a hidden page parameter in the form; a new search must go back to the first page.

Examples

<SearchField id="q" label="Rechercher un utilisateur" placeholder="Nom ou adresse" value={query} clearHref={query ? '?' : undefined} />

Surfaces

• App: the two admin lists, users and registrations; the dashboard filters with a Field of type search, since its list filters in place.

Related

Field, Button, LiveRegion.

Decisions

• 2026-09-24: GET by default and onsearch for the in-place case, so the app’s server-searched lists and the site’s demo are one component.

Criteria held by construction

• 12.6, Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d'en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
  The form carries role search, so the zone is listed with the page's landmarks and reached in one move.
• 11.1, Chaque champ de formulaire a-t-il une étiquette ?
  The label is tied to the field by for and id and hidden rather than absent; the button's word next to the field is what makes hiding it acceptable.
• 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
  The submit button says 'Rechercher'; the magnifier is a hidden drawing of the same word.

Tokens it reads

• Colour: --rl-action, --rl-ink, --rl-ink-soft, --rl-line-control, --rl-surface
• Typography: --rl-text-base, --rl-text-sm
• Spacing: --rl-space-2, --rl-space-3
• Layout: --rl-radius, --rl-border

Seen in patterns

• Data table page