Disabled values
Enforcing validation is essential to a great UX. It supports the following: You can set an option to invalid through the disabled property: data: [ ... { text: 'Chicago', value: 'chi', disabled: true }]
Having invalids set up correctly not just enhances the UX, but improves performance.
Demo
jsxconst myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi', disabled: true },
{ text: 'London', value: 'lon', disabled: true },
{ text: 'Los Angeles', value: 'la' },
{ text: 'New York', value: 'ny' },
{ text: 'Paris', value: 'par' },
{ text: 'San Francisco', value: 'sf' }
];
<Select
data={myData}
touchUi=
JSXTSX
import { Select, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myData = useMemo(
() => [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
disabled: true,
},
{
text: 'London',
value: 'lon',
disabled: true,
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
],
[],
);
return <Select data={myData} display="inline" />;
}
export default App;
import { Select, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
disabled: true,
},
{
text: 'London',
value: 'lon',
disabled: true,
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
];
const App: FC = () => <Select data={myData} display="inline" />;
export default App;