Color picker component with single and multiple color selection. Refine luminosity with a slider when necessary.
Use it for filtering and anywhere where users need to pick colors.
Shipping with useful features for a refined UX, including:
Pickers & dropdowns it can be picked up with the Framework and Complete licenses or with the component license .
Viewing demos & code for
Color - Single/multiple select
Change demo
Single/multiple select
React Single and multiple color select from a predefined set of colors. Custom set can be used. With source code. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
theme: ',
themeVariant: ' ,
lang: '
};
class App extends React.Component {
render() {
return (
<mobiscroll.Form>
<mobiscroll.FormGroup>
<mobiscroll.FormGroupTitle>Single select & multiple select</mobiscroll.FormGroupTitle>
<mobiscroll.Color select="single">
<mobiscroll.Input placeholder="Please Select...">One color</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color select="multiple" headerText="Pick your favorite colors">
<mobiscroll.Input placeholder="Please Select...">Multiple</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</mobiscroll.Form>
);
}
}
Color - Swipe direction
Change demo
Swipe direction
React Color picker demo with a predefined set of colors. Supporting both horizontal and vertical scrolling. With source code. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
theme: ',
themeVariant: ' ,
lang: '
};
class App extends React.Component {
render() {
return (
<mobiscroll.Form>
<mobiscroll.FormGroup>
<mobiscroll.FormGroupTitle>Swipe direction</mobiscroll.FormGroupTitle>
<mobiscroll.Color navigation="vertical" rows={3}>
<mobiscroll.Input placeholder="Please Select...">Vertical</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color navigation="horizontal">
<mobiscroll.Input placeholder="Please Select...">Horizontal</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</mobiscroll.Form>
);
}
}
Color - Refine
Change demo
Refine
React Color picker demo for selecting and setting the luminosity for a single color with a slider. For desktop & mobile. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
class App extends React.Component {
render() {
return (
<div>
<mobiscroll.Color
ref="color"
theme ="
themeVariant ="
lang ="
mode ="refine"
placeholder="Please Select..."
/>
</div>
);
}
}
Color - Custom colors
Change demo
Custom colors
React Color picker demo with selection from a custom set of colors. Use it on both mobile & desktop. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
class App extends React.Component {
render() {
return (
<div>
<mobiscroll.Color
ref="color"
theme ="
themeVariant ="
lang ="
data ={["#fff9c4","#ffe57f","#fce68e","#ffcc80","#ffcdd2","#ffccbc","#ff8a80","#ff9e80","#ef9a9a","#eb8686","#f48fb1","#ff99bc","#e1bee7","#c5cae9","#b2ebf2","#bbdefb","#dcedc8","#e6ee9c","#dbffb0","#d5c0a6","#d9ad7b","#d7ccc8","#d4d7da"]}
placeholder="Please Select..."
/>
</div>
);
}
}
Color - Multiple select count
Change demo
Multiple select count
React Multiple color select with a maximum of six available slots. Custom set can be used. Use it on desktop & mobile. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
class App extends React.Component {
render() {
return (
<div>
<mobiscroll.Color
ref="color"
theme ="
themeVariant ="
lang ="
placeholder="Please Select..."
select ={6}
/>
</div>
);
}
}
Color - Event handlers
Change demo
Event handlers
React Color picker for mobile and desktop demo with event hooks for custom integration and functionality. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
class App extends React.Component {
onInit = (event, inst) => {
// Your custom event handler goes here
}
onMarkupReady = (event, inst) => {
// Your custom event handler goes here
}
onBeforeShow = (event, inst) => {
// Your custom event handler goes here
}
onPosition = (event, inst) => {
// Your custom event handler goes here
}
onShow = (event, inst) => {
// Your custom event handler goes here
}
onSet = (event, inst) => {
// Your custom event handler goes here
}
onItemTap = (event, inst) => {
// Your custom event handler goes here
}
onDestroy = (event, inst) => {
// Your custom event handler goes here
}
onClose = (event, inst) => {
// Your custom event handler goes here
}
onCancel = (event, inst) => {
// Your custom event handler goes here
}
onBeforeClose = (event, inst) => {
// Your custom event handler goes here
}
onClear = (event, inst) => {
// Your custom event handler goes here
}
onPreviewItemTap = (event, inst) => {
// Your custom event handler goes here
}
render() {
return (
<div>
<mobiscroll.Color
ref="color"
theme ="
themeVariant ="
lang ="
onInit ={this.onInit}
onMarkupReady ={this.onMarkupReady}
onBeforeShow ={this.onBeforeShow}
onPosition ={this.onPosition}
onShow ={this.onShow}
onSet ={this.onSet}
onItemTap ={this.onItemTap}
onDestroy ={this.onDestroy}
onClose ={this.onClose}
onCancel ={this.onCancel}
onBeforeClose ={this.onBeforeClose}
onClear ={this.onClear}
onPreviewItemTap ={this.onPreviewItemTap}
placeholder="Please Select..."
/>
</div>
);
}
}
Color - Display modes
Change demo
Display modes
React Color picker for mobile and desktop with top, bottom, popup, center, modal, bubble and inline embeddable display. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
theme: ',
themeVariant: ' ,
lang: '
};
class App extends React.Component {
render() {
return (
<mobiscroll.Form >
<mobiscroll.FormGroup>
<mobiscroll.FormGroupTitle>Try different display modes</mobiscroll.FormGroupTitle>
<mobiscroll.Color display="bottom">
<mobiscroll.Input placeholder="Please Select...">Bottom</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color display="top">
<mobiscroll.Input placeholder="Please Select...">Top</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color display="center">
<mobiscroll.Input placeholder="Please Select...">Center</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color display="bubble">
<mobiscroll.Input placeholder="Please Select...">Bubble</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
<mobiscroll.FormGroup className="mbsc-padding">
<p className="mbsc-thin">With inline display you can embed the color component in almost any markup or form.</p>
</mobiscroll.FormGroup>
<mobiscroll.FormGroup className="md-hidden">
<mobiscroll.FormGroupTitle>Embedded color picker</mobiscroll.FormGroupTitle>
<mobiscroll.Color type="hidden" display="inline" />
</mobiscroll.FormGroup>
</mobiscroll.Form>
);
}
}
.md-hidden .mbsc-color-input {
display: none;
}
Color - Desktop
Change demo
Desktop
React desktop color picker for the web. Interact on the UI with cursor & pointer for usage on not just touchscreens. For React.
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
lang: ' ,
theme: ',
themeVariant: '
};
class App extends React.Component {
render() {
return (
<mobiscroll.Form>
<div className="mbsc-grid">
<div className="mbsc-row mbsc-justify-content-center">
<div className="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>Pop-up positioning</mobiscroll.FormGroupTitle>
<mobiscroll.Color display="top" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Top</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color display="bottom" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Bottom</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Anchored</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color display="center" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Center</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
</div>
<div className="mbsc-row mbsc-justify-content-center">
<div className="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>Basic usage</mobiscroll.FormGroupTitle>
<mobiscroll.Color select="multi" headerText="Pick your favorite colors" display="top" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Multiple</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color select={6} display="top" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Fixed</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color mode="refine" display="top" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Luminosity</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
</div>
<div className="mbsc-row mbsc-justify-content-center">
<div className="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>With buttons</mobiscroll.FormGroupTitle>
<mobiscroll.Color display="center" touchUi={false} buttons={['set']}>
<mobiscroll.Input placeholder="Please Select...">Set button</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color display="center" touchUi={false} buttons={['set', 'cancel']}>
<mobiscroll.Input placeholder="Please Select...">Set/Cancel</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
</div>
</div>
</mobiscroll.Form>
);
}
}
Color - Theming capabilities
Change demo
Theming capabilities
The look and feel of the color can be deeply customized. There are four levels of customization:
Base themes: Choose between Mobiscroll, iOS, Android Material and Windows.
Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
Custom themes: Use the theme builder to customize the colors and make it match your brand.
Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme in the floating action bar on the right side .
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
lang: ' ,
theme: ',
themeVariant: '
};
class App extends React.Component {
render () {
return (
<mobiscroll.Form>
<div className="mbsc-grid mbsc-grid-fixed">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>iOS Theme</mobiscroll.FormGroupTitle>
<mobiscroll.Color theme="ios" themeVariant="light" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Light</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="ios" themeVariant="dark" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Dark</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="ios-gray" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Custom</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>Material Theme</mobiscroll.FormGroupTitle>
<mobiscroll.Color theme="material" themeVariant="light" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Light</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="material" themeVariant="dark" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Dark</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="material-indigo" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Custom</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
</div>
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>Windows Theme</mobiscroll.FormGroupTitle>
<mobiscroll.Color theme="windows" themeVariant="light" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Light</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="windows" themeVariant="dark" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Dark</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="windows-yellow" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Custom</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>Mobiscroll Theme</mobiscroll.FormGroupTitle>
<mobiscroll.Color theme="mobiscroll" themeVariant="light" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Light</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="mobiscroll" themeVariant="dark" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Dark</mobiscroll.Input>
</mobiscroll.Color>
<mobiscroll.Color theme="mobiscroll-lime" display="bubble" touchUi={false}>
<mobiscroll.Input placeholder="Please Select...">Custom</mobiscroll.Input>
</mobiscroll.Color>
</mobiscroll.FormGroup>
</div>
</div>
</div>
</mobiscroll.Form>
);
}
}
Looking for something you didn't see or have a sales question?
Ask us anything
Customize & try demos locally
Sign in or start your free trial
What framework are you using?
Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Customize & try this demo locally
Sign in or start your free trial
Install demo in your app
Follow this quick, two minute install guide
Close window
Customize & try demos locally
How would you like to do it?
Install demo in your app
Follow this quick, two minute install guide
Close window
Thanks for downloading
Try and customize the app locally
Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.
Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve
Let us know if we can help and enjoy!
Change your password
Need to update your password? Enter and hit the button below
Change your password
Need to update your password? Enter and hit the button below
Your password has been changed!
Thanks for downloading
Customize demos locally
Everything is set up so that you can dig in right away and start exploring.
We have set up a trial so that you can try the demos locally.
Extract the zip file and open the demo in your favorite browser.
To install Mobiscroll in your project
follow instructions from this page .
Thanks for downloading
Customize demos locally
Please extract the zip file and run the project like any Angular CLI app.
Make sure to have the Angular CLI installed.
For installation and usage, extract the zip file and open a terminal window and follow these steps.
Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ng serve --open
Let us know if we can help and enjoy! 👍
Thanks for downloading
Customize demos locally
Everything is set up so that you can dig in right away and start exploring.
We have set up a trial so that you can try the demos locally.
The easiest way to get started is to follow the installation steps and by
grabbing the code directly from the demo page. Let us know if we can help and enjoy!
Thanks for downloading
Customize demos locally
Everything is set up so that you can dig in right away and start exploring.
We have set up a trial so that you can try the demos locally.
The demos are using Babel's in-browser ES6 and JSX transformer.
Extract the zip file and open the demo in your browser. To install Mobiscroll in your project
follow instructions from this page .