{"schemaVersion":"1.0","type":"Article","slug":"mantine-selectstepper-a-modern-alternative-to-traditional-dropdowns-m4whh","url":"https://api.zyvop.com/mantine-selectstepper-a-modern-alternative-to-traditional-dropdowns-m4whh","title":"Mantine SelectStepper: A Modern Alternative to Traditional Dropdowns","subtitle":null,"tldr":"In the world of modern web development, choosing the right UI component can make or break the user...","keywords":["react","nextjs","mantineui","TypeScript"],"entities":["Giovambattista Fazioli","Senior Full-stack Engineer, Lead Developer","react","nextjs","mantineui","TypeScript","ZyVOP"],"keyTakeaways":["In the world of modern web development, choosing the right UI component can make or break the user experience.","Today, we're excited to introduce you to Mantine SelectStepper, a React component that revolutionizes how users interact with predefined option lists.","Built on top of the powerful Mantine UI library, this component offers an elegant, intuitive alternative to traditional dropdown selects."],"headings":["What is Mantine SelectStepper?","Getting Started: Incredibly Simple","Key Features That Set It Apart","1. Infinite Loop Navigation","2. Controlled Component Pattern","3. Disabled Items Support","4. Custom Icons","5. Custom Rendering","6. Extended Data Properties","7. Smooth Animations","8. Keyboard Navigation","9. Mantine Styles API Integration","10. Perfect for Forms","Creative Use Cases","Boolean Stepper Pattern","Why Choose SelectStepper?","Part of the Mantine Extensions Ecosystem","Documentation and Demos","Conclusion"],"outboundLinks":["https://mantine.dev/","https://gfazioli.github.io/mantine-select-stepper/","https://mantine-extensions.vercel.app/","https://www.npmjs.com/package/@gfazioli/mantine-select-stepper","https://github.com/gfazioli/mantine-select-stepper"],"contentText":"In the world of modern web development, choosing the right UI component can make or break the user experience. Today, we're excited to introduce you to Mantine SelectStepper, a React component that revolutionizes how users interact with predefined option lists. Built on top of the powerful Mantine UI library, this component offers an elegant, intuitive alternative to traditional dropdown selects. What is Mantine SelectStepper? The Mantine SelectStepper is a Mantine-based React component that allows users to navigate through a list of options using increment and decrement buttons. Instead of clicking to open a dropdown menu, users can simply click left or right arrows to cycle through predefined values. This approach is particularly effective for: Configuration panels with sequential options Forms where users need to select from an ordered list Mobile interfaces where dropdowns can be cumbersome Applications requiring keyboard-friendly navigation Getting Started: Incredibly Simple One of the most impressive aspects of SelectStepper is its simplicity. Getting started requires just a few lines of code: yarn add @gfazioli/mantine-select-stepper # or npm install @gfazioli/mantine-select-stepper Enter fullscreen mode Exit fullscreen mode After installation, import the styles at the root of your application: import '@gfazioli/mantine-select-stepper/styles.css'; Enter fullscreen mode Exit fullscreen mode And you're ready to use it: import { SelectStepper } from '@gfazioli/mantine-select-stepper'; function Demo() {return <SelectStepper data={['React', 'Vue', 'Angular']} />;} Enter fullscreen mode Exit fullscreen mode That's it! With just three lines of code, you have a fully functional, beautifully styled stepper component. Key Features That Set It Apart 1. Infinite Loop Navigation Enable seamless cycling through options with the loop prop. When users reach the end of the list, they automatically wrap back to the beginning—perfect for circular selections like months, days, or priority levels. <SelectStepper data={['January', 'February', 'March']} loop /> Enter fullscreen mode Exit fullscreen mode 2. Controlled Component Pattern SelectStepper supports both controlled and uncontrolled modes, giving you complete flexibility in state management: import { useState } from 'react';import { SelectStepper } from '@gfazioli/mantine-select-stepper'; function Demo() {const [value, setValue] = useState('react'); return ( <SelectStepper data={['React', 'Vue', 'Angular']} value={value} onChange={(newValue) => setValue(newValue)} />);} Enter fullscreen mode Exit fullscreen mode 3. Disabled Items Support Need to restrict certain options? Simply mark them as disabled in your data array: const data = [{ value: 'react', label: 'React' },{ value: 'vue', label: 'Vue', disabled: true },{ value: 'angular', label: 'Angular' },]; <SelectStepper data={data} /> Enter fullscreen mode Exit fullscreen mode The stepper will intelligently skip disabled items during navigation. 4. Custom Icons Personalize your stepper with custom icons using the leftIcon and rightIcon props: import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'; <SelectStepperdata={['Small', 'Medium', 'Large']}leftIcon={<IconChevronLeft />}rightIcon={<IconChevronRight />}/> Enter fullscreen mode Exit fullscreen mode 5. Custom Rendering Take full control over how options are displayed with the renderOption prop: <SelectStepperdata={frameworks}renderOption={(item) => ( <Group gap=\"xs\"> <Badge color={item.color}>{item.label}</Badge> <span>v{item.version}</span> </Group>)}/> Enter fullscreen mode Exit fullscreen mode 6. Extended Data Properties Need to store additional metadata with your options? Simply extend the ComboboxItem interface: interface ComplexItem extends ComboboxItem {version?: string;color?: string;} const data: ComplexItem[] = [{ value: 'react', label: 'React', version: '18.2.0', color: 'blue' },{ value: 'vue', label: 'Vue.js', version: '3.2.37', color: 'green' },]; function Demo() {const [value, setValue] = useState<ComplexItem | null>(null); return ( <SelectStepper data={data} value={value?.value} onChange={(_val, option) => setValue(option as ComplexItem)} />);} Enter fullscreen mode Exit fullscreen mode The onChange handler provides the complete option object with all your custom properties. 7. Smooth Animations Control animation behavior with dedicated props: <SelectStepperdata={['Option 1', 'Option 2', 'Option 3']}animate={true}animationDuration={300}animationTimingFunction=\"ease-in-out\"/> Enter fullscreen mode Exit fullscreen mode Or disable animations entirely for a snappier feel. 8. Keyboard Navigation Built-in keyboard support makes the component accessible and efficient: ArrowLeft or ArrowDown - Move to previous item ArrowRight or ArrowUp - Move to next item 9. Mantine Styles API Integration Fully integrated with Mantine's Styles API, SelectStepper allows you to customize every inner element: <SelectStepperdata={['React', 'Vue', 'Angular']}classNames={{ root: 'custom-root', view: 'custom-view', action: 'custom-action',}}/> Enter fullscreen mode Exit fullscreen mode 10. Perfect for Forms SelectStepper integrates seamlessly with other Mantine form components: <Stack><TextInput label=\"Name\" placeholder=\"Your name\" /> <SelectStepper data={['React', 'Vue', 'Angular']} withBorder placeholder=\"Select framework\"/> <Group grow> <SelectStepper data={['Junior', 'Mid', 'Senior']} withBorder placeholder=\"Experience level\" /> <TextInput label=\"Years of experience\" /></Group></Stack> Enter fullscreen mode Exit fullscreen mode Creative Use Cases Boolean Stepper Pattern One clever pattern is using SelectStepper as an enhanced boolean toggle: const [enabled, setEnabled] = useState(false); <SelectStepperdata={[ { value: 'false', label: 'Disabled' }, { value: 'true', label: 'Enabled' },]}value={enabled ? 'true' : 'false'}onChange={(val) => setEnabled(val === 'true')}leftIcon={enabled ? <IconToggleRight /> : <IconToggleLeft />}renderOption={(item) => ( <Badge color={item.value === 'true' ? 'green' : 'red'}> {item.label} </Badge>)}/> Enter fullscreen mode Exit fullscreen mode Why Choose SelectStepper? Simplicity: Minimal setup, maximum functionality TypeScript: Full type safety with TypeScript support Accessibility: Built-in keyboard navigation Customization: Extensive styling options through Mantine's Styles API Performance: Smooth animations and optimized rendering Flexibility: Works in controlled and uncontrolled modes Modern: Built on React 18/19 with modern best practices Part of the Mantine Extensions Ecosystem SelectStepper is part of a growing collection of high-quality Mantine components. If you're looking for more extensions to enhance your Mantine UI applications, check out Mantine Extensions for additional components that integrate seamlessly with your existing Mantine setup. Documentation and Demos For comprehensive documentation, live demos, and interactive examples, visit the official SelectStepper documentation. The documentation includes: Interactive configurator to experiment with all props Complete API reference Real-world usage examples Styles API documentation TypeScript type definitions Conclusion Mantine SelectStepper proves that sometimes the best solutions are the simplest ones. By rethinking how users interact with option lists, it provides a refreshing alternative to traditional dropdowns that's both elegant and highly functional. Whether you're building a configuration panel, a multi-step form, or any interface requiring option selection, SelectStepper offers the perfect blend of simplicity, flexibility, and user experience. Give it a try in your next project, and experience how a thoughtfully designed component can elevate your user interface! Resources: 📦 npm package 📖 Documentation & Demos 🐛 GitHub Repository 🎨 Mantine UI 🔌 More Mantine Extensions","contentHash":"sha256:3ead29c6db7997510a4b8469b0b7df8016b34f2687ad1327ed54636bb8aa5890","authorName":"Giovambattista Fazioli","authorUrl":"https://api.zyvop.com/author/giovambattista","authorSameAs":["https://gfazioli.github.io","https://github.com/gfazioli","https://x.com/gfazioli","https://www.linkedin.com/in/giovambattistafazioli/"],"category":null,"tags":["react","nextjs","mantineui","TypeScript"],"audience":"Readers researching react","tone":"Professional, senior full-stack engineer, lead developer perspective","readingTimeMinutes":5,"wordCount":1074,"faqs":null,"primaryTopic":"react","publishedAt":"2026-09-04T09:16:55.489Z","updatedAt":"2026-09-04T09:16:55.489Z","canonicalUrl":"https://dev.to/undolog/mantine-selectstepper-a-modern-alternative-to-traditional-dropdowns-bbc"}