ds-svelte-community
Nais Docs
Pages
  • Home
  • CSS
  • Icons
Typography
  • BodyLong
  • BodyShort
  • Detail
Components
  • Accordion
  • ActionMenu Beta
  • Alert
  • Button
  • Checkbox
  • Chips
  • ConfirmationPanel
  • CopyButton
  • ErrorSummary
  • ExpansionCard
  • GuidePanel
  • HelpText
  • InternalHeader Beta
  • List
  • Loader
  • Modal
  • Pagination
  • Popover
  • Radio
  • ReadMore
  • Search
  • Select
  • Skeleton
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • TextField
  • ToggleGroup
  • Tooltip
Primitives
  • Bleed
  • Box

Version: 1.0.0
Try dark darkside
Try light darkside

Search

Search lets users explore a website or application by typing keywords or phrases that find the most relevant content for them.

Read more about this component in the Aksel documentation.

    Default

Properties

PropertyDescriptionDefault
Control
Properties
label
required

Search label.

string
-
clearButton

If false, removes clear-button option from input.

boolean
true
clearButtonLabel

aria-label on clear button.

string
"Clear"
description

Adds a description to extend labling of a field.

string
""
disabled

Disables element

boolean
false
hideLabel

Shows label and description for screen readers only.

boolean
true
loading

Loading state.

boolean
false
searchIconText

Aria label on search icon.

string
"Search"
size

Size of input.

"medium" "small"
"medium"
value
bindable

Value of input.

string
""
variant

Changes button-variant, "simple" removes button

"primary" "secondary" "simple"
"primary"
Snippets
button

Custom button

 -
Events
onclear

Event when the input is cleared

 -

Properties included from: Omit<HTMLInputAttributes, "size" | "value" | "type" | "role" | "onclick">, HTMLButtonAttributes