Zoo web components

 Can I use shadowdomv1? Can I use custom-elementsv1? Documentation

Set of web-components which can be used in any modern UI framework (or without any).

The web-component set implements Z+ shop style guide.

Form elements

Input/Textarea

Additional helpful information for our users This input field should contain only letters and it is required! Learn your HTML and don't overcomplicate Possible values: Dog, Cat, Small Pet, Bird, Aquatic This input field is required and should be one of the possible values! Click on input to show context menu with date selection Date range is invalid! Min date is 2020-01-01 and max date is 2022-01-01 Email validation This input field should contain a valid email address! Start typing to see available tags. Tag filtering should be done on client side by listening on 'input' event on slotted input. At least one tag should be selected! Dog The domestic dog (Canis familiaris or Canis lupus familiaris)[4] is a domesticated descendant of the wolf. Cat The cat (Felis catus) is a domestic species of small carnivorous mammal. Aquatic An aquatic animal is an animal, either vertebrate or invertebrate, which lives in the water for most or all of its lifetime. Bird Birds are a group of warm-blooded vertebrates constituting the class Aves /ˈeɪviːz/, characterised by feathers, toothless beaked jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton. Reptile Reptiles, in common parlance, are a group of tetrapods with an ectothermic ('cold-blooded') metabolism and amniotic development. no results Start typing to see available tags. Tag filtering should be done on client side by listening on 'input' event on slotted input. At least one tag should be selected! 🐕 Dog 🐈 Cat 🐦‍⬛ Bird 🐟 Aquatic 🦎 Reptile no results

Select

Documentation link Additional information Additional information Please choose an option! Searchable multiple select legend Search is case insensitive. Please choose an option! Zoo web components Searchable select legend Search is case insensitive. Prefer to use input with a datalist.

Checkbox

Additional information You should really check this checkbox.

Radio

Radio group Additional information Selecting an option is a must.

Toggle switch

Search for more than 8.000 products. Added to cart!

Buttons, button groups, modal windows

Your basket contains licensed items
This is an info message. Only one coupon can be accepted with each order. Please choose one coupon that you just entered.


Collapsable List

Default

Header1
content
 Header2
content

Auto close turned off, border always visible, opened by default

Header1
content
 Header2
content

Data grids

A grid with pagination, resizing, reorder and sorting.

Valid Created Date Status Max Weight Delivery Date # of pieces Price

Grid with sticky header and pagination. Grid height and width are limited on the client side.

Valid Created Date Status Max Weight Delivery Date # of pieces Price

A grid with expandable rows

Valid Created Date Status Max Weight Delivery Date # of pieces Price Actions
Valid
2020-05-10
Grid Row Expand
50kg
2020-05-10
10
15 EUR
Content row 1
Invalid
2020-05-15
Grid Row Expand
5kg
2020-05-15
1
1 EUR
Content row 2
Valid
2020-05-20
Grid Row Expand
5kg
2020-05-15
4
7 EUR
Content row 3
Valid
2020-05-20
Grid Row No Expand
5kg
2020-05-15
4
7 EUR
Github NPM