Button Group

Button group renders group of <zoo-button> components and it works like a tabs, where only one button can be in active state.

Set data-active attribute on one of <zoo-button> components to mark it as initially active.

Example

<zoo-button-group active-type="primary" inactive-type="transparent" style="width: max-content">
    <zoo-button>
        <button type="button">Status Pending</button>
    </zoo-button>
    <zoo-button data-active>
        <button type="button">Fulfilled</button>
    </zoo-button>
    <zoo-button>
        <button type="button">Status Failure</button>
    </zoo-button>
</zoo-button-group>

The above will render to:

Attributes

Name	Description	Optional
`active-type`	zoo-button type (primary, secondary, hollow, transparent)	✕
`inactive-type`	zoo-button type (primary, secondary, hollow, transparent)	✕

Slots

Name	Description	Optional
	`<zoo-button>` component with arbitrary content inside	✕

Button

Button component which provides styles for <button></button>

Example

<zoo-button>
    <button type="button" disabled>Disabled :(</button>
</zoo-button>

The above will render to:

Attributes

Name	Description	Default	Optional
`type`	primary, secondary, hollow, transparent	`primary`	✓

CSS Variables

Name	Description
`--primary-light`	used as right end of gradient
`--primary-mid`	used as left side of gradient, background on hover/focus and as text-color for `type="hollow"`
`--primary-dark`	used for background when button is active
`--secondary-light`	same as `primary-light` for `type="secondary"`
`--secondary-mid`	same as `primary-mid` for `type="secondary"`
`--secondary-dark`	same as `primary-dark` for `type="secondary"`

Slots

Name	Description	Optional
	`<button>` element with arbitrary content inside	✕

Checkbox

Checkbox component which provides styles for <input type="checkbox"/>

Example usage

<zoo-checkbox highlighted>
    <input id="checkbox-id" slot="checkbox" type="checkbox"/>
    <label for="checkbox-id" slot="label">An example checkbox</label>
</zoo-checkbox>

The above will render to:

An example checkbox

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓
`highlighted`	flag indicating whether the border around the input is visible	✓

invalid and highlighted attributes should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-mid`	used for all states
`--warning-mid`	used for all states when `invalid` attribute is present

Slots

Name	Description	Optional
`checkbox`	`<input id="checkbox-id" slot="checkbox" type="checkbox/>`	✕
`label`	`<label for="checkbox-id" slot="label">An example checkbox</label>`	✓
`info`	accepts any element, for example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓

Dependencies

zoo-info
zoo-attention-icon

Collapsable List Item

Container that might be injected into collapsible-list container component

Example usage

See collapsible list component

Attributes

Name	Description	Optional
`opened-by-default`	element will be initially opened	✓
`border-visible`	border will remain visible when the component closed	✓

Collapsable List

Container component which provides styles for slotted content.

Example usage

<zoo-collapsable-list>
    <zoo-collapsable-list-item>
        <span slot="header">Header1</span>
        <div slot="content">content</div>
    </zoo-collapsable-list-item>
    <zoo-collapsable-list-item>
        <span slot="header">Header2</span>
        <div slot="content">content</div>
    </zoo-collapsable-list-item>
</zoo-collapsable-list>

Rendered

Header1

content

Header2

content

Attributes

Name	Description	Optional
`disable-autoclose`	disables automatic closing of elements	✓

CSS Variables

Name	Description
`--primary-mid`	user for border and icon
`--primary-dark`	user for header text when item is active

Slots

Name	Description	Optional
	injected element must be `zoo-collapsable-list-item`, which accepts `header` and `content` slots	✕
`header`	arbitrary content	✕
`content`	arbitrary content	✕

Dependencies

zoo-collapsable-list-item

Date Range

Date range component which provides styles for slotted <input type="date"/>

Example usage

<zoo-date-range>
    <label slot="label">Input date range</label>
    <input slot="date-from" type="date"/>
    <input slot="date-to" type="date"/>
    <span slot="info">Additional helpful information for our users</span>
    <span slot="error">Date range is invalid!</span>
</zoo-date-range>

The above will render to:

Input date range Additional helpful information for our users Date range is invalid!

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓

invalid attribute should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-light`	refer to `zoo-link`
`--primary-mid`	refer to `zoo-link`
`--primary-dark`	refer to `zoo-link`
`--warning-mid`	color of error message

Slots

Name	Description	Optional
`date-from`	name of the slot for input date-from	✕
`date-to`	name of the slot for input date-to	✕
`label`	name of the slot for label	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓

Dependencies

zoo-input

Feedback

Container component which provides a styled container with preset icon.

Example usage

<div style="height: 50px; width: auto">
    <zoo-feedback>
        This is an info message.
    </zoo-feedback>
</div>

Rendered

This is an info message.

Attributes

Name	Description	Default	Optional
`type`	`info`, `error`, `success`	`info`	✓

CSS Variables

Name	Description
`--primary-ultralight`	background when `type="success"`
`--primary-mid`	icon color when `type="success"`
`--info-ultralight`	background when `type="info"`
`--info-mid`	icon color when `type="info"`
`--warning-ultralight`	background when `type="error"`
`--warning-mid`	icon color when `type="error"`

Slots

Name	Description	Optional
	arbitrary content	✓

Dependencies

zoo-attention-icon

Container footer component.

Example usage

<zoo-footer>
    <zoo-link type="negative">
        <a slot="anchor" href="https://github.com/zooplus/zoo-web-components">Github</a>
    </zoo-link>
    <zoo-link type="negative">
        <a slot="anchor" href="https://www.npmjs.com/package/@zooplus/zoo-web-components">NPM</a>
    </zoo-link>
</zoo-footer>

The above will render to:

Github

NPM

CSS Variables

Name	Description
`--primary-light`	right end of background gradient
`--primary-mid`	left end of background gradient

Slots

Name	Description	Optional
	arbitrary content	✓

Grid Header

Grid header component.

Example usage

<zoo-grid-header slot="headercell" sortable="true" sortableproperty="createdDate">Created date</zoo-grid-header>

Attributes

sortable attribute should be used as a boolean attribute.

Name	Description	Optional
`sortable`	flag, which indicates whether this column is sortable	✓
`sortableproperty`	string that will be emitted when user changes sorting	✓ - when `sortable` is not set
`sort-title`	title for sort icon for a11y	✓
`swap-title`	title for swap icon for a11y	✓

Slots

Name	Description	Optional
	Arbitrary content	✕

Dependencies

zoo-grid
zoo-arrow-icon

Grid Row

Grid row component.

Example usage

<zoo-grid-row slot="row">
    <div slot="row-details">
        <div>Valid</div>
        <div>2020-05-10</div>
        <div>Grid Row Expand</div>
        <div>
            <button type="button" class="expander">Expand</button>
        </div>
    </div>
    <div slot="row-content" expanded>
        <div>Content</div>
    </div>
</zoo-grid-row>

<zoo-grid-row slot="row">
    <div slot="row-details">
        <div>Valid</div>
        <div>2020-05-20</div>
        <div>Grid Row No Expand</div>
        <div></div>
    </div>
</zoo-grid-row>

zoo-grid-row is special component that allows to define row with additional expandable content. slot="row-content" can be omitted and then zoo-grid-row works just like a standard <div slot="row">...</div>

If slot="row-content" is defined, then expand action should be defined to be able to expand additional content. To expand row-content add expanded attribute to <div slot="row-content"></div>, like in example above. expanded attribute should be controlled by client code (button click, row click etc.)

Attributes

Name	Description	Optional
`expanded`	slot="row-content" flag, that indicates if extra content will be visible	✓

Slots

Name	Description	Optional
	Arbitrary content	✕

Dependencies

zoo-grid

Grid

Grid component.

Example usage

<div style="margin: 30px;box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)">
    <zoo-grid currentpage="3" maxpages="20" reorderable stickyheader>
        <zoo-grid-header slot="headercell" sortable="true" sortableproperty="createdDate">Created date</zoo-grid-header>
        <zoo-grid-header slot="headercell" sortable="true" sortableproperty="minWeight">Min weight</zoo-grid-header>
        <zoo-grid-header slot="headercell">Price</zoo-grid-header>

        <div slot="row"><div>2020-05-05</div><div>30 kg</div><div>20 EUR</div></div>
        <div slot="row"><div>2020-05-10</div><div>23 kg</div><div>15 EUR</div></div>
        <div slot="row"><div>2020-05-15</div><div>10 kg</div><div>5 EUR</div></div>

        <zoo-select labelposition="left" slot="pagesizeselector">
            <label for="grid-page-size" slot="label">Page Size</label>
            <select id="grid-page-size" slot="select">
                <option selected>5</option>
                <option>10</option>
                <option>25</option>
            </select>
        </zoo-select>
    </zoo-grid>
</div>

The above will render to:

Created date

Min weight

Price

2020-05-05

30 kg

20 EUR

2020-05-10

23 kg

15 EUR

2020-05-15

10 kg

5 EUR

Page Size

Attributes

Name	Description	Optional
loading	flag which indicates whether to show loader inside grid	✓
stickyheader	flag which indicates whether grid's header should be sticky when scrolling	✓
resizable	flag which indicates whether grid columns should be resizable	✓
reorderable	flag which indicates whether grid's column should be reorderable	✓
currentpage	current page that the user is on, mandatory only when using paginator	✓
maxpages	maximum number of pages, mandatory only when using paginator	✓
prev-page-title	title for previous page button for a11y	✓
next-page-title	title for next page button for a11y	✓

loading, stickyheader, resizable and reorderable attributes should be used as a boolean attribute.

CSS variables

Name	Description
`--warning-dark`	user for text color for `norecords` slot
`--grid-column-sizes`	sizes of each column, for example: `repeat(var(--grid-column-num), minmax(50px, 1fr))`
`--grid-stickyheader-position-top`	header position from top of the page when using `stickyheader`

By default, grid will calculate number of headers supplied via slot, and apply repeat(var(--grid-column-num), minmax(50px, 1fr)) css rule to header and each row; If you want to change some of widths of some columns you can set --grid-column-sizes css custom property on zoo-grid to change width of columns, for example: --grid-column-sizes: 150px repeat(9, minmax(50px, 1fr)) !important; to force first column to be 150px wide. However, when resizable attribute is supplied, grid will set column widths automatically on element level, so --grid-column-sizes will not work, to force width of any column use the following css:

 zoo-grid div[column="1"] {
    min-width: 150px;
 }

Slots

Name	Description	Optional
headercell	`<zoo-grid-header slot="headercell">Header</zoo-grid-header>`	✕
row	arbitrary content or `<zoo-grid-row />`	✓
pagesizeselector	arbitrary content	✓
norecords	arbitrary content, whether to show it or not must be handled by the client	✓
footer-content	arbitrary content, shown on the same line as pagination	✓

Events

Name	Description	Event Content
`sortChange`	output event, on `zoo-grid`	`{detail: { property: $propertyName, direction: $direction }}`

propertyName - name of property passed to header via sortableproperty attribute;
direction - either desc, asc;

When direction becomes undefined, whole detail object emitted in the event is undefined.

Name	Description	Event Content
`pageChange`	output event, whenever current page changes	`{detail: { pageNumber: $pageNumber }}`

Dependencies

zoo-paginator
zoo-spinner

Container header component.

Example usage

<zoo-header>
    <img slot="img" alt="Zooplus logo" src="https://zooplus.github.io/zoo-web-components/logo.png"/>
    <h1 slot="headertext">Zooplus web components</h1>
    <zoo-button style="margin-left: 50px">
        <button type="button">Zoo+ theme</button>
    </zoo-button>
</zoo-header>

The above will render to:

Zooplus web components

CSS Variables

Name	Description
`--primary-mid`	text color

Slots

Name	Description	Optional
`img`	logo image	✓
`headertext`	slot for header text, replaces `headertext` attribute is defined	✓
	arbitrary content after first two slots	✓

Input Tag Option

Component which provides styles for slotted <zoo-tag/> inside zoo-input-tag element.

Slots

Name	Description	Optional
`tag`	slot for `zoo-tag` element	✕
`description`	arbitrary content	✕

Input Tag

Component which provides styles for slotted <input/>. Selected values are stored in slotted <select>.

Example usage

<zoo-input-tag>
    <label for="input-tag" slot="label">Tag input</label>
    <input id="input-tag" slot="input" placeholder="Type a tag name"/>
    <span slot="info">Start typing to see available tags. Tag filtering should be done on client side by listening on 'input' event on slotted input.</span>
    <span slot="error">At least one tag should be selected!</span>
    <select slot="select" multiple required>
        <option value="Dog"></option>
        <option value="Cat"></option>
        <option value="Bird"></option>
        <option value="Aquatic"></option>
    </select>
    <zoo-input-tag-option slot="tag-option" id="dog-tag">
        <zoo-tag slot="tag" type="tag" data-value="Dog" tabindex="0">
            <span slot="content">Dog</span>
        </zoo-tag>
        <span slot="description">The domestic dog (Canis familiaris or Canis lupus familiaris)[4] is a domesticated descendant of the wolf.</span>
    </zoo-input-tag-option>
    <zoo-input-tag-option slot="tag-option" id="cat-tag">
        <zoo-tag slot="tag" type="tag" data-value="Cat" tabindex="0">
            <span slot="content">Cat</span>
        </zoo-tag>
        <span slot="description">The cat (Felis catus) is a domestic species of small carnivorous mammal.</span>
    </zoo-input-tag-option>
    <zoo-input-tag-option slot="tag-option" id="aquatic-tag">
        <zoo-tag slot="tag" type="tag" data-value="Aquatic" tabindex="0">
            <span slot="content">Aquatic</span>
        </zoo-tag>
        <span slot="description">An aquatic animal is an animal, either vertebrate or invertebrate, which lives in the water for most or all of its lifetime.</span>
    </zoo-input-tag-option>
    <zoo-input-tag-option slot="tag-option" id="bird-tag">
        <zoo-tag slot="tag" type="tag" data-value="Bird" tabindex="0">
            <span slot="content">Bird</span>
        </zoo-tag>
        <span slot="description">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.</span>
    </zoo-input-tag-option>
    <span slot="no-results">no results</span>
</zoo-input-tag>

The above will render to:

Tag input 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.

no results

Note: nested zoo-tag should have a data-value attribute matching one of the options value from slotted select. That's how the component holds the state of the form control.

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓
`data-initial-value`	a string value with initially selected options, separated with comma (data-initial-value="Dog,Cat")	✓

invalid attribute should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-light`	refer to `zoo-link`
`--primary-mid`	refer to `zoo-link`
`--primary-dark`	refer to `zoo-link`
`--warning-mid`	color of error message

Slots

Name	Description	Optional
`input`	name of the slot for input	✕
`select`	slot for select which will hold state of selected options	✕
`tag-option`	slot for `zoo-input-tag-option` element.	✕
`no-results`	slot for arbitrary content when no options are matched element.	✕
`label`	name of the slot for label	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓

Dependencies

zoo-input-tag-option
zoo-cross-icon

Input

Input component which provides styles for slotted <input type="text"/>

Example usage

<zoo-input>
    <label for="input-type-text" slot="label">Input type text</label>
    <input id="input-type-text" slot="input" type="text" placeholder="input"/>
    <span slot="info">Additional helpful information for our users</span>
    <a slot="link" href="https://zooplus.github.io/zoo-web-components/" target="about:blank">Forgotten your password?</a>
</zoo-input>

The above will render to:

Input type text Additional helpful information for our users Forgotten your password?

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓
`labelposition`	`top`, `left`	✓

invalid attribute should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-light`	refer to `zoo-link`
`--primary-mid`	refer to `zoo-link`
`--primary-dark`	refer to `zoo-link`
`--warning-mid`	color of error message

Slots

Name	Description	Optional
`input`	name of the slot for input	✕
`label`	name of the slot for label	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓
`link`	accepts `a`	✓
`additional`	slot for additional content, inserted right after `slot="input"`	✕

Dependencies

zoo-label
zoo-info
zoo-link
zoo-attention-icon

Link

Link wrapper component which provides styles for <a></a>

Example usage

<div style="height: 10px; width: auto">
    <zoo-link>
        <a slot="anchor" href="https://zooplus.github.io/zoo-web-components/">Zoo web components</a>
    </zoo-link>
</div>

The above will render to:

Zoo web components

Attributes

Name	Description	Default	Optional
`type`	`negative`, `primary`, `grey`, `warning`	`negative`	✓
`size`	`regular`, `bold`, `large`	`regular`	✓

CSS Variables

Name	Description
`--primary-mid`	link text color
`--primary-dark`	link text color on hover, focus and active
`--warning-dark`	link text when `type="warning"`

Slots

Name	Description	Optional
`pre`	will be rendered before link text, for example: `<svg slot="pre">...</svg>`	✓
`anchor`	`<a>` element	✕
`post`	will be rendered after link text, for example: `<svg slot="post">...</svg>`	✓

Container component which provides styles for modal and slotted content. Modal visibility must be controlled by the client.

Example usage

<zoo-modal>
    <span slot="header">Your basket contains licensed items</span>
    <div>
        <zoo-feedback>This is an info message. Only one coupon can be accepted with each order.</zoo-feedback>
        <br>
        <zoo-checkbox highlighted="true">
            <label for="chkbx" slot="label">I understand and confirm that ALL of the above statements are true</label>
            <input id="chkbx" slot="checkbox" type="checkbox"/>
        </zoo-checkbox>
        <br>
        <zoo-button style="margin: 0 auto" type="hollow">
            <span>Add to cart</span>
        </zoo-button>
    </div>
</zoo-modal>

CSS Variables

Name	Description
`--primary-mid`	close icon color
`--zoo-modal-opacity`	background opacity
`--zoo-modal-z-index`	z-index value, 9999 if not set

Functions

Name	Description	Example
`openModal`	`function` to show the modal.	`document.querySelector('#zoo-modal').openModal();`
`closeModal`	`function` to hide the modal.	`document.querySelector('#zoo-modal').closeModal();`

Slots

Name	Description	Optional
	arbitrary content	✕
header	arbitrary content	✕

Dependencies

zoo-cross-icon

Container component which provides styles for slotted content.

Example usage

<zoo-navigation>
    <a href="https://github.com/zooplus/zoo-web-components">Github</a>
    <a href="https://www.npmjs.com/package/@zooplus/zoo-web-components">NPM</a>
</zoo-navigation>

The above will render to:

Github NPM

Attributes

Name	Description	Optional
`direction`	`vertical`, `horizontal`	✓

CSS Variables

Name	Description
`--primary-light`	right end of background gradient
`--primary-mid`	left end of background gradient

Slots

Name	Description	Optional
	arbitrary content	✕

Paginator

Paginator component.

Example

<zoo-paginator currentpage="1" maxpages="10"></zoo-paginator>

The above will render to:

Attributes

Name	Description	Optional
`currentpage`	current active page	✓
`maxpages`	number of the last page	✓
`prev-page-title`	title for prev page button for a11y	✓
`next-page-title`	title for next page button for a11y	✓

CSS Variables

Name	Description
`--primary-ultralight`	used as background for active page
`--primary-mid`	used as text color for page numbers

Slots

Name	Description	Optional
`pagesizeselector`	element that should allow used to set page size, it is just presentational slot, it does not handle events	✕

Events

Name	Description	Event Content
`pageChange`	output event whenever page is changed	`{detail: { pageNumber: $pageNumber }}`

Dependencies

zoo-arrow-icon

Quantity Control

Input component which provides styles for slotted <input type="number"/>

Webkit based browsers (Chrome/Safari) do not support hiding native number scroll on input type="number", when supplying such input for this component remember to add:

input::-webkit-outer-spin-button, zoo-quantity-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Example usage

<zoo-quantity-control>
    <button type="button" slot="decrease" title="decrease">
        <svg height="18" width="18"><line y1="9" x1="0" x2="18" y2="9"></line></svg>
    </button>
    <label for="number-input" slot="label">Label</label>
    <input id="number-input" slot="input" readonly placeholder="0" type="number" step="50"/>
    <button type="button" slot="increase" title="increase">
        <svg height="18" width="18">
            <line y1="0" x1="9" x2="9" y2="18"></line>
            <line y1="9" x1="0" x2="18" y2="9"></line>
        </svg>
    </button>
</zoo-quantity-control>

The above will render to:

Label

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓
`labelposition`	`top`, `left`	✓

invalid attribute should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-mid`	background color of slotted button

Slots

Name	Description	Optional
`input`	`<input id="number-input" slot="input" readonly placeholder="0" type="number" step="50"/>`	✕
`label`	`<label for="input-id" slot="label">An example input</label>`	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element that shows when `invalid` attribute is present	✓
`increase`	accepts any element that should act as a button for increase	✓
`decrease`	accepts any element that should act as a button for decrease	✓

Dependencies

zoo-label
zoo-info
zoo-attention-icon

Radio

Radio component which provides styles for <input type="radio"/> and associated <label></label>

Example usage

<zoo-radio>
    <span slot="label">Radio group</span>

    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice1" name="contact" value="email">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice2" name="contact" value="phone">
    <label for="contactChoice3">Mail</label>
    <input type="radio" id="contactChoice3" name="contact" value="mail">

    <span slot="info">Additional information</span>
</zoo-radio>

The above will render to:

Radio group Email Phone Mail Additional information

Note: id and for attributes on native elements are optional when you do not care about accessibility, selecting an option by clicking on a label will not be possible without these attributes.

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓
`labelposition`	`top`, `left`	✓

invalid attribute should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-mid`	color of radio input
`--warning-mid`	color of radio input when `invalid` attribute is present

Slots

Name	Description	Optional
	arbitrary amount of `input type="radio"` and labels for them	✕
`label`	name of the slot for label	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓

Dependencies

zoo-label
zoo-info
zoo-attention-icon

Searchable Select

Select component which provides styles for slotted <select>...</select>

Example usage

<zoo-searchable-select>
    <span slot="legend">Searchable select legend</span>

    <label slot="selectlabel" for="searchable-select">Searchable select</label>
    <select id="searchable-select" slot="select">
        <option value="" selected="" disabled="">Please choose an option</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="smallPet">Small Pet</option>
        <option value="aquatic">Aquatic</option>
    </select>

    <label for="inserted-input" slot="inputlabel">Searchable input</label>
    <input id="inserted-input" slot="input" type="text" placeholder="Select options"/>
</zoo-searchable-select>

The above will render to:

Searchable select legend Searchable select Searchable input

Note: id and for attributes on native elements are optional when you do not care about accessibility.
inputlabel and selectlabel slots are optional as well, since they are used only by screen readers.

Attributes

Name	Description	Optional
`invalid`	flag which indicates whether the input is valid or not	✓
`loading`	flag which indicates whether to show loader inside slotted `select` element	✓
`labelposition`	`top`, `left`	✓

invalid and loading attributes should be used as a boolean attribute.

Slots

Name	Description	Optional
`legend`	name of the slot for legend	✕
`select`	`<select slot="select">...</select>`	✕
`input`	`<input slot="input" type="text" placeholder="Select multiple options"/>`	✕
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓
`link`	accepts `a`	✓
`inputlabel`	name of the slot for select label	✕
`selectlabel`	name of the slot for input label	✕

Dependencies

zoo-select

Select

Select component which provides styles for slotted <select>...</select>

Example usage

<zoo-select>
    <label for="zoo-select" slot="label">Label</label>
    <select id="zoo-select" slot="select">
        <option value="value1">Dog</option>
        <option value="value2">Cat</option>
        <option value="value3">Small Pet</option>
        <option value="value4">Aquatic</option>
    </select>
    <a slot="link" href="https://zooplus.github.io/zoo-web-components/" target="about:blank">Forgotten your password?</a>
</zoo-select>

The above will render to:

Label Forgotten your password?

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name	Description	Default	Optional
`labelposition`	`top`, `left`	`top`	✓
`invalid`	flag which indicates whether the input is valid or not	`null`	✓
`loading`	flag which indicates whether to show loader	`null`	✓

invalid and loading attributes should be used as a boolean attribute.

CSS Variables

Name	Description
`--primary-light`	refer to `zoo-link`
`--primary-mid`	refer to `zoo-link`
`--primary-dark`	refer to `zoo-link`
`--warning-mid`	color of error message

Slots

Name	Description	Optional
`select`	`<select id="zoo-select" slot="select">...</select>`	✕
`label`	`<label for="zoo-select">Label</label>`	✓
`input`	`<slot name="input"></slot>` can be used for composition of select and input	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓
`link`	accepts `a`	✓

Dependencies

zoo-label
zoo-info
zoo-link
zoo-attention-icon
zoo-preloader
zoo-arrow-icon

Spinner

Spinner svg.

Spinner has position: absolute, you have to place it inside an element with position: relative.

Example usage

<div style="position: relative; height: 100px; width: auto">
    <zoo-spinner></zoo-spinner>
</div>

Rendered

CSS Variables

Name	Description
`--primary-mid`	color of spinner

Tag

Tag component.

Example usage

<zoo-tag type="info" style="--color: red">
    <span slot="content">Default info Default infoDefault infoDefault infoDefault infoDefault infoDefault</span>
</zoo-tag>

Rendered

Default info Default infoDefault infoDefault infoDefault infoDefault infoDefault

Attributes

Name	Description	Optional
`type`	info, cloud, tag	✕

CSS Variables

Name	Description
`--color`	color of border and text of tag when type="info"

Slots

Name	Description	Optional
`pre`	will be rendered before tag text, for example: `<svg slot="pre">...</svg>`	✓
`content`	content of the tag	✕
`post`	will be rendered after tag text, for example: `<svg slot="post">...</svg>`	✓

Toast

Container component which has fly-in/out animations. It can be controlled via exported functions.

Example usage

<zoo-toast>
    <span slot="content">This is an info message.</span>
</zoo-toast>

Attributes

Name	Description	Default	Optional
`type`	`info`, `error`, `success`	`info`	✓
`timeout`	how long the toast should be visible for (in seconds)	`3`	✓

CSS Variables

Name	Description
`--info-ultralight`	background color of toast when `type="info"`
`--info-mid`	icon color of toast when `type="info"`
`--warning-ultralight`	background color of toast when `type="error"`
`--warning-mid`	icon color of toast when `type="error"`
`--primary-ultralight`	background color of toast when `type="success"`
`--primary-mid`	icon color of toast when `type="success"`

Functions

Name	Description	Example
`show`	`function` to show the toast.	`document.querySelector('#zoo-toast').show();`
`hide`	`function` to hide the toast.	`document.querySelector('#zoo-toast').hide();`

Slots

Name	Description	Optional
`content`	arbitrary content	✓

Toggle Switch

Input component which provides styles for slotted <input type="checkbox"/>

Example usage

<zoo-toggle-switch>
    <input id="input-toggle" slot="input" type="checkbox"/>
    <label for="input-toggle" slot="label">Toggle switch</label>
</zoo-toggle-switch>

The above will render to:

Toggle switch

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name	Description	Optional
`labelposition`	`top`, `left`	✓

CSS Variables

Name	Description
`--primary-mid`	color of clickable toggle

Slots

Name	Description	Optional
`input`	`<input id="input-id" slot="input" type="checkbox"/>`	✕
`label`	`<label for="input-id" slot="label">An example input</label>`	✓
`info`	accepts any element, foe example `span`	✓
`error`	accepts any element element that shows when `invalid` attribute is present	✓

Dependencies

zoo-label
zoo-info
zoo-attention-icon

Tooltip component.

Example usage

<zoo-button>
    <button type="button">
        Button
        <zoo-tooltip position="bottom">Tooltip text</zoo-tooltip>
    </button>
</zoo-button>

The above will render to:

Attributes

Name	Description	Default	Optional
`position`	`top`, `right`, `bottom`, `left`	`top`	✓

Slots

Name	Description	Optional
	arbitrary content	✓

Theming

The following CSS Custom Properties should be provided and can be overriden by the user. You can provide them in your global css file.

CSS variables

:root {    
    --primary-ultralight: #EBF4E5;
    --primary-light: #66B100;
    --primary-mid: #3C9700;
    --primary-dark: #286400;

    --secondary-ultralight: #FFF0E7;
    --secondary-light: #FF8800;
    --secondary-mid: #FF6200;
    --secondary-dark: #CC4E00;

    --info-ultralight: #ECF5FA;
    --info-mid: #459FD0;

    --warning-ultralight: #FDE8E9;
    --warning-mid: #ED1C24;
    --warning-dark: #BD161C;
}

Validation

For validation you can use arbitrary tool. If you already use a framework you can use, for example, angular forms since the basic elements like <input/>, <select>...</select> are already exposed.

However, the preffered way would be to use HTML5 form validation, good articles are:

As a quick example you can refer to the following snippet:

<form novalidate>
    <zoo-input>
        <label for="input-validation" slot="label">Input type text</label>
        <input id="input-validation" slot="input" type="text" placeholder="input" required pattern="[A-Za-z ]+"/>
        <span slot="error">This input field should contain only letters and it is required!</span>
    </zoo-input>
    <zoo-button>
        <button type="submit">Submit</button>
    </zoo-button>
</form>

novalidate attribute is defined to prevent browser from showing native error bubbles, since we already have a way of providing error messages.

And the respective JavaScript handler:

document.querySelector('form').addEventListener('submit', async e => {
    e.preventDefault();
    const valid = e.target.checkValidity();
    const backendURL = '...';
    // your handling logic
    if (valid) {
        await fetch(backendURL);
    } else {
        // nothing, zoo-web-components library should show all errors provided via `slot='error'` on each element.
    }
});

The above JS is already loaded into this page, the rendered HTML for you to try it is here:

Example

Attributes

Slots

Rendered output

HTML code

Example

Attributes

CSS Variables

Slots

Rendered output

HTML code

Example usage

Attributes

CSS Variables

Slots

Dependencies

Example usage

Attributes

Rendered output

HTML code

Example usage

Rendered

Attributes

CSS Variables

Slots

Dependencies

Rendered output

HTML code

Example usage

Attributes

CSS Variables

Slots

Dependencies

Rendered output

HTML code

Example usage

Rendered

Attributes

CSS Variables

Slots

Dependencies

Rendered output

HTML code

Example usage

CSS Variables

Slots

Example usage

Attributes

Slots

Dependencies

Example usage

Attributes

Slots

Dependencies

Example usage

Attributes

CSS variables

Slots

Events

Dependencies

Rendered output

Zooplus web components

HTML code

Example usage

Zooplus web components

CSS Variables

Slots

Slots

Example usage

Attributes

CSS Variables

Slots

Dependencies

Rendered output

HTML code

Example usage

Attributes

CSS Variables

Slots

Dependencies