Stepper
Use the stepper to enable controlled increasing and decreasing of values. Configure the steps and choose to provide an input for manual entry.
Demo
<Stepper label="Adults" description="From 14 years" min={1} defaultValue={1} max={15} />
<Stepper label="Children" description="2-14 years" inputPosition="start" max={15} />
<Stepper label="Infant" description="0-2 years" inputPosition="start" max={10} />
JSXTSX
import { Page, setOptions, Stepper } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Passengers</div>
<Stepper label="Adults" description="From 14 years" min={1} defaultValue={1} max={15} />
<Stepper label="Children" description="2-14 years" inputPosition="start" max={15} />
<Stepper label="Infant" description="0-2 years" inputPosition="start" max={10} />
</div>
</Page>
);
}
export default App;
import { Page, setOptions, Stepper } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Passengers</div>
<Stepper label="Adults" description="From 14 years" min={1} defaultValue={1} max={15} />
<Stepper label="Children" description="2-14 years" inputPosition="start" max={15} />
<Stepper label="Infant" description="0-2 years" inputPosition="start" max={10} />
</div>
</Page>
);
export default App;