Quillo.qweComponents

Tags

#input

64 components tagged input. Narrow them down with a search or more tags.

Layout 1

FieldsetA <fieldset> with a legend and a line about it, its fields stacked, in a row or in a grid; disabled as one.layoutformsinputaccessibilityno-js6 views · 7 downloads

Forms 49

AddressFormStreet, city, region, postcode and country in the usual layout, with the autocomplete names browsers fill from.formsinputcheckoutcommerceno-js5 views · 7 downloadsAutocompleteA free-text box that offers matches as one types, with the arrow keys and Enter; whatever is typed may stay.formsinputsearchkeyboardinteractive5 views · 7 downloadsCardInputA payment card as it is typed: the number grouped, the brand, MM/YY and the code, with typos said.formsinputpaymentcheckoutinteractive6 views · 6 downloadsCharacterCounterA text box or textarea with a live 120 / 280 count that warns near the limit, as a hard stop or a soft one that blocks sending.formsinputtextinteractive5 views · 6 downloadsCheckboxA checkbox drawn by CSS on a real input, with an indeterminate state, and a group of them in a fieldset.formsinputno-js5 views · 6 downloadsCheckboxCardsAny number of choices as cards with a title, a line of detail and a check, each a real checkbox a form sends.formsinputcardselectno-js5 views · 6 downloadsChecklistInputCheckboxes under a progress line that says how many are done and fills as they are ticked; each posts with a form.formsinputprogresslistinteractive5 views · 7 downloadsCodeEditorA code textarea with line numbers, where Tab puts spaces in, Shift+Tab takes them out and Enter keeps the indent.formsinputcodekeyboardinteractive5 views · 8 downloadsColorSwatchesPick one colour from a set of round swatches: real radio buttons, so they post with a form and work with the keyboard.formspickerinputthemeno-js5 views · 5 downloadsComboboxA text box that filters a list of options as you type, or asks for them (a server, a map service), with the arrow keys, Enter and Escape.formsinputselectsearchinteractive5 views · 6 downloadsConsentCheckboxA required checkbox beside legal text with links to the terms and the privacy policy, posted as a real checkbox.formsinputsecurityno-js5 views · 6 downloadsContactFormName, email, subject and message with a Send button: a plain form posting to your route, shown again with errors or as sent.formsinputpageno-js5 views · 7 downloadsCurrencyInputAn amount with its currency's symbol, thousands grouped as it is typed and the decimals the currency has, sent as plain digits.formsinputpricecommerceinteractive5 views · 5 downloadsDateTimeInputA date and a time side by side on the browser's own fields, giving one ISO value, in a time zone when given one.formsinputcalendartimeinteractive5 views · 8 downloadsDependentSelectTwo drop-downs where the second's options depend on the first, both real selects a form sends.formsselectinputinteractive5 views · 7 downloadsDurationInputHours, minutes and seconds typed side by side, giving one value in seconds, with the arrow keys and carrying past 59.formsinputtimeinteractive5 views · 7 downloadsEmailInputAn email box that offers the address probably meant when the domain has a slip (gmial.com, outlook.con), one click to take it.formsinputuserinteractive5 views · 8 downloadsFormFieldA label, a hint and an error around any control, with a required mark, the label beside or above it.formsinputlayoutno-js5 views · 5 downloadsImagePickerOne of several pictures chosen by its thumbnail: real radios under the pictures, so a form sends the choice and the arrow keys move it.formsinputimagepickerno-js6 views · 7 downloadsInlineEditText that turns into a box to change it in place: Enter saves, Escape puts it back.formsinputtextinteractive5 views · 7 downloadsKeyValueEditorRows of keys and values to add and remove, with duplicate keys pointed out; posts JSON or name[key] fields.formsinputdatainteractive5 views · 6 downloadsLikertScaleA statement with a row of points from Strongly disagree to Strongly agree: real radios in a fieldset, posted with a form.formsinputno-js6 views · 7 downloadsMarkdownEditorA Markdown textarea with a toolbar that wraps the selection (bold, italic, link, list) and a Preview tab rendered as the page will show it.formsinputtexttabsinteractive5 views · 8 downloadsMaskedInputA box that shapes what is typed to a pattern (### ###-####, AA-00-AA) as it is typed, dropping what does not fit.formsinputtextinteractive6 views · 8 downloadsMentionInputA textarea that offers people when @ is typed, puts @handle in, and sends the handles mentioned beside the text.formsinputcommentsocialinteractive5 views · 6 downloadsMinMaxInputTwo number boxes, a minimum and a maximum, kept in order and inside their bounds, posted as name_min and name_max.formsinputfilterinteractive5 views · 6 downloadsNewsletterFormAn email box and a Subscribe button in one row, a plain form posting to your route, with a done state once it worked.formsinputbuttonmarketingno-js5 views · 6 downloadsNpsInputThe eleven scores 0 to 10 of a Net Promoter question in a row, with the words at the ends: real radios posted with a form.formsinputfeedbackno-js5 views · 7 downloadsNumberInputA number box with − and + buttons that stop at its limits, and keeps what is typed between them.formsinputinteractive5 views · 7 downloadsOtpInputBoxes for a one-time code: typing moves along, Backspace goes back, pasting fills them all.formsinputsecurityinteractive5 views · 5 downloadsPasswordInputA password field with a show/hide toggle and, for new passwords, a strength meter.formsinputsecurityinteractive5 views · 4 downloadsPasswordStrengthA new-password field with a meter that fills as it gets stronger and a checklist of rules ticked as they are met.formsinputsecurityfeedbackinteractive5 views · 4 downloadsPhoneInputA country code select and a number box, sent together in international form (+351912345678) with the country's ISO code.formsinputselectuserinteractive6 views · 6 downloadsProfileFormAvatar, name, username, bio and website in the usual layout: a plain form posting to your route, shown again with errors.formsinputprofileuseruploadno-js5 views · 8 downloadsQuantityInputA compact count with − and + either side, kept to its limits and step, with the arrow keys, PageUp/PageDown, Home and End.formsinputcartcommerceinteractive5 views · 6 downloadsRadioCardsOne choice of several as cards with a title, a line of detail and a dot, each a real radio a form sends.formsinputcardselectno-js5 views · 7 downloadsRadioGroupOne choice of several: real radio buttons in a fieldset, in a column, a row or as cards.formsinputselectno-js5 views · 6 downloadsRangeSliderTwo thumbs on one track for a range (a price from–to), each with the keyboard; they cannot cross.formsinputinteractive5 views · 6 downloadsRatingStars to give a score (radio buttons underneath, half stars if wanted) or to show one, read-only.formsinputinteractive6 views · 6 downloadsRichTextEditorA formatted-text editor (bold, italic, lists, links, headings) on contenteditable, its HTML kept in a hidden input a form sends.formsinputtextinteractive7 views · 5 downloadsSearchInputA search box with a magnifier and a clear button; Escape clears, Enter submits its form.formsinputsearchinteractive6 views · 5 downloadsSignaturePadDraw a signature on a canvas (or type the name), with Clear, kept as a PNG data URL in a hidden input a form sends.formsinputdragdocumentinteractive5 views · 7 downloadsSliderA range input with its value shown beside the label and the track filled up to the thumb.formsinputno-js5 views · 5 downloadsSwitchAn on/off toggle that is a real checkbox: it submits with a form and works with the keyboard.formsinputno-js4 views · 6 downloadsTagInputCollects tags: Enter or a comma adds one, Backspace removes; a form gets them as a list.formsinputinteractive6 views · 5 downloadsTextAreaA box for several lines, with a live count against a limit and an option to grow with what is typed.formsinputtextno-js5 views · 8 downloadsTextFieldA labelled input with help text, an error message and short text before or after it.formsinputtextno-js5 views · 8 downloadsTimeInputA time in parts (hours, minutes, AM/PM) changed with the arrow keys or by typing.formsinputtimeinteractive5 views · 6 downloadsUrlInputA web address box that shows the protocol fixed at the start and lets the browser check the shape, with a tick when it looks right.formsinputlinkno-js5 views · 4 downloads

Overlays 1

PromptDialogA modal asking for one text value with OK and Cancel, on the browser's own <dialog>; Enter submits, Escape cancels.dialogoverlayinputformsinteractive4 views · 5 downloads

Navigation 1

NavSearchA search box for a navbar that grows when focused, with / to reach it and Escape to clear; a real form sends it.navigationsearchinputformskeyboardinteractive5 views · 5 downloads

Data 1

PropertyGridGrouped name and value rows that fold, each value edited by the control its type asks for, with changes marked and undone.dataformsinputsettingsinteractive7 views · 5 downloads

Media 1

VolumeControlA mute button and a level slider with an icon that shows how loud it is; a real range, so forms and keyboards work.mediaaudioinputformsinteractive6 views · 7 downloads

Commerce 2

CartItemOne line of a cart: picture, name and options, a quantity control, the line's total and Remove, as inputs a form sends.commercecartpriceformsinputinteractive6 views · 6 downloadsCouponInputA promo code box with Apply: on_apply(code) says whether it took, and an applied code shows with Remove.commercecheckoutformsinputinteractive6 views · 5 downloads

Finance 1

AccountPickerChoose the account to pay from as radio cards with each one's masked number and available balance, those short of the amount marked.financebankingformsinputno-js7 views · 7 downloads

Dashboard 1

ApiKeyFieldA secret shown masked in a read-only field, with Show and Copy buttons and a hidden input for forms.dashboardsecuritysettingsformsinputinteractive5 views · 6 downloads

Social 3

ChatInputA chat message box that grows as you type, sends on Enter and breaks the line on Shift+Enter; a plain form in a page.socialchatformsinputinteractive6 views · 6 downloadsPostComposerWrite a post with a character ring and count, attach files, and post with a button or Ctrl+Enter; a plain form in a page.socialformsinputuploadinteractive6 views · 6 downloadsReplyBoxA reply box that is one line until focused, then grows and shows Post and Cancel; it posts a form or calls back.socialcommentformsinputinteractive6 views · 5 downloads

Mobile 3

ComposerBarA message box that grows to a limit, swaps send and voice, keeps attachments in a tray, rides above the keyboard and is safe to paste into.mobileinteractivechatkeyboardinputvoice3 views · 9 downloadsNumberPadAn on-screen number pad with a decimal and delete, a hold to delete fast and a haptic, for where the system keyboard is wrong.mobileinteractivekeypadnumberinputforms5 views · 7 downloadsStepperRowMinus and plus in a row, a hold to repeat and accelerate, typed values, limits, min and max stated to screen readers.mobileinteractivesteppernumberinputforms3 views · 7 downloads

Other tags

interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1