Multiple select
Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input, native select or rendered inline. Turn it on by setting selectMultiple to true.
As an alternative to the checkbox list it works great for category filtering... eg. e-commerce solutions.
Looking for single value selection? Check out the previous example →
Demo
jsxconst myData = [
{ text: 'Books', value: 1 },
{ text: 'Movies, Music & Games', value: 2' },
{ text: 'Electronics & Computers', value: 3 },
{ text: 'Home, Garden & Tools', value: 4 },
{ text: 'Health & Beauty', value: 5 },
{ text: 'Toys, Kids & Baby', value: 6 },
{ text: 'Clothing & Jewelry', value: 7 },
{ text: 'Sports & Outdoors', value: 8 },
{ text: 'Automotive & Industrial', value: 9 }
];
<Select
data={myData}
selectMultiple={true}
touchUi=
JSXTSX
import { Select, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myData = useMemo(
() => [
{
value: 1,
text: 'Books',
},
{
value: 2,
text: 'Movies, Music & Games',
},
{
value: 3,
text: 'Electronics & Computers',
},
{
value: 4,
text: 'Home, Garden & Tools',
},
{
value: 5,
text: 'Health & Beauty',
},
{
value: 6,
text: 'Toys, Kids & Baby',
},
{
value: 7,
text: 'Clothing & Jewelry',
},
{
value: 8,
text: 'Sports & Outdoors',
},
{
value: 9,
text: 'Automotive & Industrial',
},
],
[],
);
return (
<Select
data={myData}
selectMultiple={true}
label="Multi-select"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
);
}
export default App;
import { Select, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
value: 1,
text: 'Books',
},
{
value: 2,
text: 'Movies, Music & Games',
},
{
value: 3,
text: 'Electronics & Computers',
},
{
value: 4,
text: 'Home, Garden & Tools',
},
{
value: 5,
text: 'Health & Beauty',
},
{
value: 6,
text: 'Toys, Kids & Baby',
},
{
value: 7,
text: 'Clothing & Jewelry',
},
{
value: 8,
text: 'Sports & Outdoors',
},
{
value: 9,
text: 'Automotive & Industrial',
},
];
function App() {
return (
<Select
data={myData}
selectMultiple={true}
label="Multi-select"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
);
}
export default App;