Skip to main content

Creating pickers

Inline picker​

An inline picker is rendered directly in the page. It is always visible as long as its parent element is visible. There is no concept of opening or closing an inline picker.

Create a root element​

To create an inline picker, you must first create an element that will contain it:

<div class="pickerContainer"></div>

Create the picker​

A picker is created by calling the createPicker function. createPicker accepts many options but also has sensible defaults. Here is a simple inline picker:

import { createPicker } from 'picmo';

const container = document.querySelector('.pickerContainer');
const picker = createPicker({
  rootElement: container
});

This will render the picker in the container element.

See Popup pickers for details on creation and usage of popup pickers.