Search Input
Enter a search query with a clear action.
Preview
Import
import { SearchInput, CurrencyInput, PhoneInput, TimePicker, DateTimePicker, DateRangeField, MultiSelect, Autocomplete, CreatableSelect, AsyncSelect, SegmentedTabs, RangeSlider, DualRangeSlider, FileDropzone, ImageUpload, AvatarUpload, ColorField, ComboboxField, CheckboxCard, RadioCard, SwitchField, SliderField, StepperField, TagsField, CopyInput } from "@sigil-ui/components";Usage
<SearchInput placeholder="Search..." />Sub-components
This component includes the following parts:
<CurrencyInput><PhoneInput><TimePicker><DateTimePicker><DateRangeField><MultiSelect><Autocomplete><CreatableSelect><AsyncSelect><SegmentedTabs><RangeSlider><DualRangeSlider><FileDropzone><ImageUpload><AvatarUpload><ColorField><ComboboxField><CheckboxCard><RadioCard><SwitchField><SliderField><StepperField><TagsField><CopyInput>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-radius-input | Radius input |
--s-radius-md | Radius md |
--s-border | Border |
--s-background | Background |
--s-radius-sm | Radius sm |
--s-surface | Surface |
--s-ring | Ring |
--s-primary | Primary |
--s-text | Text |
--s-card-radius | Card radius |
--s-radius-full | Radius full |