Mobile & Desktop usage
Use the select/combobox for both mobile and desktop or set it up responsively.
The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.
Use it on an existing form field, custom input, native select or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.
Handle different screen sizes by setting it up responsively Check out the responsive demo →
Demo
jsxconst myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber'},
{ text: 'Chicago', value: 'chi'},
{ text: 'London', value: 'lon'}
];
<Select
data={myData}
touchUi=
jsxconst myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber'},
{ text: 'Chicago', value: 'chi'},
{ text: 'London', value: 'lon'}
];
<Select
data={myData}
touchUi=
jsxconst myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber'},
{ text: 'Chicago', value: 'chi'},
{ text: 'London', value: 'lon'}
];
<Select
data={myData}
display="inline"
touchUi=
Use the picker with any inputs & show on focus/click
Use the picker with a Mobiscroll input
JSXTSXCSS
import { Button, Select, setOptions } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [openPicker, setOpenPicker] = useState(false);
const [selected, setSelected] = useState('atl');
const myData = useMemo(
() => [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
],
[],
);
const handleClick = useCallback(() => {
setOpenPicker(true);
}, []);
const handleChange = useCallback((ev) => {
setSelected(ev.value);
}, []);
const handleClose = useCallback(() => {
setOpenPicker(false);
}, []);
const inputProps = useMemo(
() => ({
className: 'md-mobile-picker-input',
placeholder: 'Please Select...',
}),
[],
);
const boxInputProps = useMemo(
() => ({
className: 'md-mobile-picker-box-label',
inputStyle: 'outline',
placeholder: 'Please Select...',
}),
[],
);
return (
<>
<div className="mbsc-grid">
<div className="mbsc-form-group">
<div className="mbsc-row">
<div className="mbsc-col-12">
<div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
<Select data={myData} inputComponent="input" inputProps={inputProps} />
</div>
</div>
</div>
<div className="mbsc-form-group">
<div className="mbsc-row">
<div className="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
Disable <code>onClick/onFocus</code> and only show on button
</div>
<div className="mbsc-col-8">
<Select
data={myData}
inputComponent="input"
inputProps={inputProps}
showOnClick={false}
showOnFocus={false}
isOpen={openPicker}
value={selected}
onChange={handleChange}
onClose={handleClose}
/>
</div>
<div className="mbsc-col-4">
<Button variant="outline" color="primary" className="md-mobile-picker-button" onClick={handleClick}>
Show picker
</Button>
</div>
</div>
</div>
<div className="mbsc-form-group">
<div className="mbsc-row">
<div className="mbsc-col-12">
<div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
<Select data={myData} inputProps={boxInputProps} touchUi={true} />
</div>
</div>
</div>
<div className="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
</div>
<div className="md-mobile-picker-inline">
<Select display="inline" data={myData} />
</div>
</>
);
}
export default App;
import { Button, MbscSelectChangeEvent, Select, setOptions } from '@mobiscroll/react';
import { FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
];
const App: FC = () => {
const [openPicker, setOpenPicker] = useState<boolean>(false);
const [selected, setSelected] = useState<string>('1');
const handleClick = useCallback(() => {
setOpenPicker(true);
}, []);
const handleChange = useCallback((ev: MbscSelectChangeEvent) => {
setSelected(ev.value);
}, []);
const handleClose = useCallback(() => {
setOpenPicker(false);
}, []);
const inputProps = useMemo(
() => ({
className: 'md-mobile-picker-input',
placeholder: 'Please Select...',
}),
[],
);
const boxInputProps = useMemo(
() => ({
className: 'md-mobile-picker-box-label',
inputStyle: 'outline',
placeholder: 'Please Select...',
}),
[],
);
return (
<>
<div className="mbsc-grid">
<div className="mbsc-form-group">
<div className="mbsc-row">
<div className="mbsc-col-12">
<div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
<Select data={myData} inputComponent="input" inputProps={inputProps} />
</div>
</div>
</div>
<div className="mbsc-form-group">
<div className="mbsc-row">
<div className="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
Disable <code>onClick/onFocus</code> and only show on button
</div>
<div className="mbsc-col-8">
<Select
data={myData}
inputComponent="input"
inputProps={inputProps}
showOnClick={false}
showOnFocus={false}
isOpen={openPicker}
value={selected}
onChange={handleChange}
onClose={handleClose}
/>
</div>
<div className="mbsc-col-4">
<Button variant="outline" color="primary" className="md-mobile-picker-button" onClick={handleClick}>
Show picker
</Button>
</div>
</div>
</div>
<div className="mbsc-form-group">
<div className="mbsc-row">
<div className="mbsc-col-12">
<div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
<Select data={myData} inputProps={boxInputProps} touchUi={true} />
</div>
</div>
</div>
<div className="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
</div>
<div className="md-mobile-picker-inline">
<Select display="inline" data={myData} />
</div>
</>
);
};
export default App;
.md-mobile-picker-header {
font-size: 14px;
}
.md-mobile-picker-input {
color: initial;
width: 100%;
padding: 10px;
margin: 6px 0 12px 0;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.md-mobile-picker-button.mbsc-button {
font-size: 13px;
padding: 0 15px;
line-height: 36px;
float: right;
margin: 6px 0;
width: 100%;
}
.mbsc-col-no-padding {
padding-left: 0;
}
.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
margin: 6px 0 12px 0;
}