A search input with a magnifying glass, a button that empties it, and optionally a search button.

Mirrors Search from @digdir/designsystemet-react.

Html.form [ Attr.attribute "role" "search", Events.onSubmit Searched ]
    [ Search.new { clearLabel = "Tøm søket" }
        |> Search.withButton { variant = Search.Primary, label = "Søk" }
        |> Search.view
            [ Attr.attribute "aria-label" "Søk i saker"
            , Attr.value model.query
            , Events.onInput ChangedQuery
            ]
    ]

The attributes you give view go on the <input type="search" />, like the props of React's Search.Input. Name it with aria-label, or put the whole search in a Field with a Label. Pass Attr.type_ "text" to drop the magnifying glass.

The clear button sends the input an input event with an empty value, so Events.onInput sees it like any other edit.

React → Elm

• <Search> + <Search.Input> + <Search.Clear> → Search.new { clearLabel = "…" } |> Search.view [ … ]
• data-sr-clear / --dsc-suggestion-sr-clear → clearLabel
• <Search.Button> → Search.withButton { variant = Search.Primary, label = "Søk" }
• <Search.Button variant="secondary"> → Search.withButton { variant = Search.Secondary, label = "Søk" }
• <Search.Input type="text"> → Search.view [ Attr.type_ "text" ]

React has Norwegian defaults for both button texts. Here they are required.

Managed by designsystemet-web

Search renders <ds-suggestion>, the same custom element as Suggestion. It writes:

• hidden, aria-label, aria-hidden and tabindex on the clear button (Elm only renders the initial hidden, like React, and never changes it)
• the other data-sr-* texts on <ds-suggestion>, from the CSS

Search button