RTL support is built in and can be explicitly controlled through the rtl option. If not set, it is inherited from the locale settings.
Explore the different locales Check out this example →
Demo
Enable Right-To-Left rendering
Turn RTL on
<Select
rtl={true }
/>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',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
],
[],
);
return (
<Select
data={myData}
label="Select"
rtl={true}
display="bottom"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
);
}
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',
},
{
text: 'London',
value: 'lon',
},
{
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}
label="Select"
rtl={true}
display="bottom"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
);
export default App;