Input Components for JavaScript
Wijmo Input Components
Wijmo's input components are designed to make data entry easy and efficient, using mouse or touch. Specialized and optimized for each data type, Wijmo's variety of input components answer every application need.
ComboBox
The ComboBox component is one of the most powerful and flexible in Wijmo's input module. It can be used to edit strings and to select items from lists. It is used as a base class for several other components including AutoComplete, MultiSelect, InputTime, and Menu.
ComboBox also includes grouping for extra-long hierarchical lists.
DropDown
The DropDown component is an abstract class, used as a base for several components. It is composed of the following elements:
- input element (exposed by the inputElement property): An HTML input element used to display and edit the current value. In a few cases, this element may be replaced with a non-editable element (e.g. Menu and MultiSelect components).
- drop-down button: A button used to show or hide the drop-down element.
- drop-down element (exposed by the dropDown property): An HTML element shown when the user presses the drop-down button or the F4 key. The user interacts with the drop-down element to update the value of the input element and of the component.
InputColor
The InputColor component is a drop-down that allows you to type a color using the HTML color specification or select one from a ColorPicker dropdown.
Try the demoColorPicker
The ColorPicker component is a panel that allows users to pick colors. It is used as a drop-down by the InputColor component.
Try the demoInputNumber
The InputNumber component allows users to enter and edit numbers. It has the following advantages over regular input elements:
- Users cannot enter non-numeric values at all.
- You can use the format property to format the number as it is edited, making it easy to read.
- You can use the min and max properties to specify the valid range of values (users will not be able to enter values outside this range).
- You can use the step property to specify an increment that is added to the value when the user clicks the increment/decrement buttons on the component.
InputMask
The InputMask component allows you to validate and format user input as it is entered, preventing invalid data.
Try the demoListBox
Display a list of items that contain plain text or HTML, and allow users to select items with the mouse or keyboard. ListBox supports multiple selection and item templates, as well as string arrays or arrays of objects for the itemsSource.
Try the demoMulti-Item Input Components
Wijmo has several components you can use to select multiple items from a list:
- MultiSelect: This is a drop-down component that extends ComboBox and adds checkboxes next to each item in the drop-down list. Currently checked items are exposed through the checkedItems property.
- MultiAutoComplete: This is a drop-down component that extends AutoComplete so selected items are shown as 'tokens' next to the component header, where they can be removed with the mouse or keyboard. Currently selected items are exposed through the selectedItems property.
- ListBox: The ListBox component has a checkedMemberPath property that allows you to add checkboxes to items on the list. It has a checkedItems property that gets or sets the list of checked items.
Explore all Wijmo JavaScript Components
- Frameworks & Integrations
- Angular
- Ionic
- React
- Vue
- Web Components
- TypeScript
- ES6
- DataGrid
- JavaScript DataGrid (FlexGrid)
- Core JavaScript Grid Features
- Advanced JavaScript Grid Features
- JavaScript Excel Import/Export
- JavaScript Master Detail
- JavaScript Group Panel
- JavaScript Filter
- JavaScript Custom Editors
- JavaScript Button Columns
- JavaScript Hyperlink Columns
- JavaScript Image Columns
- JavaScript Star Ratings Columns
- JavaScript Sparkline Columns
- JavaScript Spreadsheete
- JavaScript MultiRowe
- JavaScript TransposedGride
- JavaScript TransposedMultiRowe
- JavaScript PDF export
- JavaScript TreeGrid
- JavaScript Validation
- Data Management
- CollectionView
- OData CollectionView
- OData Virtual CollectionView
- Google Sheet API
- Firestore REST API
- Firestore Realtime API
- OAuth
- OLAP Pivot Grid
- OLAPe
- JavaScript OLAP PivotGride
- JavaScript OLAP PivotCharte
- JavaScript OLAP PivotPanele
- JavaScript OLAP Slicere
- Printing & Documents
- JavaScript Print Document
- JavaScript PDF
- JavaScript XLSX
- Charts
- JavaScript Chart
- JavaScript Area Chart
- JavaScript Bar Chart
- JavaScript Box-and-Whisker Chart
- JavaScript Bubble Chart
- JavaScript Column Chart
- JavaScript Donut Chart
- JavaScript ErrorBar Chart
- JavaScript Funnel Chart
- JavaScript Line Chart
- JavaScript Pareto Chart
- JavaScript Pie Chart
- JavaScript Polar Chart
- JavaScript Radar Chart
- JavaScript Scatter Chart
- JavaScript StepLine Chart
- JavaScript Sunburst Chart
- JavaScript TreeMap Chart
- JavaScript Waterfall Chart
- JavaScript Break-Even Chart
- Export Chart to Image
- Financial Charts
- JavaScript FinancialCharte
- JavaScript Arms Candle Volume Charte
- JavaScript Candle Volume Charte
- JavaScript Candlestick Charte
- JavaScript Equi Volume Charte
- JavaScript Heikin-Ashi Charte
- JavaScript HLOC Charte
- JavaScript Kagi Charte
- JavaScript Line Break Charte
- JavaScript Renko Chart e
- Navigation & Layout
- JavaScript Menu
- JavaScript Popup
- JavaScript Ribbon
- JavaScript TabPanel
- JavaScript TreeView
- Input & Editors
- JavaScript AutoComplete
- JavaScript DropDown
- JavaScript Clipboard
- JavaScript ColorPicker
- JavaScript ComboBox
- JavaScript InputColor
- JavaScript InputMask
- JavaScript InputNumber
- JavaScript ListBox
- JavaScript MultiSelect
- JavaScript MultiAutoComplete
- JavaScript Tooltips
- DateTime Controls
- JavaScript Calendar
- JavaScript InputDateTime
- JavaScript InputDate
- JavaScript InputTime
- JavaScript InputDateRange
- Designers
- Wijmo Designer
- VSCode Designer Extension
- e = Wijmo Enterprise features
- See product comparison