wired-search-input

Hand-drawn sketchy search text input web component.

For demo and view the complete set of wired-elememts: wiredjs.com

Usage

Add wired-search-input to your project:

npm i wired-search-input

Import wired-search-input definition into your HTML page:

<script type="module" src="wired-search-input/lib/wired-search-input.js"></script>

Or into your module script:

import { WiredSearchInput } from "wired-search-input"

Use it in your web page:

<wired-search-input></wired-search-input>
<wired-search-input placeholder="Search here"></wired-search-input>

Properties

placeholder - Placeholder text for the input.

disabled - disables the control

value - Value of the text.

Events

Fires all events a standard <input> element fires.

License

MIT License (c) Preet Shihn

Change Log

All notable changes to this project will be documented in this file.

[2.0.0] - October 19, 2019

• New component: wired-video Video player with the hand-drawn look
• New component: wired-calendar is a calendar component contributed by @elingerojo
• New component: wired-dialog emulates dialogs
• New component: wired-divider Draws a sketchy horizontal line between two sections
• New component: wired-image Image component that frames the image in a sketchy border
• New component: wired-link Akin to <a> tag, a link with href, and a sketchy underline
• New component: wired-search-input is a text input emulating a search input
• wired-card now supports a sketchy filled background
• wired-slider is more accessible, now built on top of input range.
• Elements are more responsive to size changes using the Resize observer
• wired-textarea does not auto-grow anymore.

[1.0.0] - April 24, 2019

• New component: wired-fab mimics the floating action button proposed in Material design
• New component: wired-spinner to show pending progress in a sketchy way
• New component: wired-tabs
• Selection in Combo and List is now shown with a sketchy zig-zag fill in the style of rough.js
• Sketchy fill also applied to progress boxes
• Better Accessibility on all components
• Refactored code to use TypeScript and latest Lit Element