Search input

Search inputs are used for inputting words or phrases and locating relevant content.
  • Examples
  • Properties
  • Accessibility

Examples

loading...

Web Component

Chi Vue

Props

Property
Description
Type
Default
disabled
To disable Search input
boolean
false
name
To define name of Search input
string
undefined
placeholder
To define placeholder of Search input
string
undefined
portal
To enable portal styling
boolean
false
size
To define size of Search input
"lg" | "md" | "sm" | "xl"
'md'
value
To define value of Search input
string
''

Events

Event
Description
Type
chiBlur
Triggered when the element has lost focus.
CustomEvent<any>
chiChange
Triggered when an alteration to the element's value is committed by the user
CustomEvent<string>
chiClean
Triggered when the user clicked the X button.
CustomEvent<any>
chiFocus
Triggered when the user sets focus on the element.
CustomEvent<any>
chiInput
Triggered when the user changed the element's value but did not commit the change yet
CustomEvent<string>
chiSearch
Triggered when the user clicked the Search button.
CustomEvent<any>

Accessibility

Accessibility guidelines coming soon