DEV Community

Cover image for Mantine SelectStepper: A Modern Alternative to Traditional Dropdowns
Giovambattista Fazioli
Giovambattista Fazioli

Posted on

Mantine SelectStepper: A Modern Alternative to Traditional Dropdowns

#react #nextjs #mantineui #typescript

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

Mantine Select Stepper

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';

<SelectStepper
  data={['Small', 'Medium', 'Large']}
  leftIcon={<IconChevronLeft />}
  rightIcon={<IconChevronRight />}
/>
Enter fullscreen mode Exit fullscreen mode

5. Custom Rendering

Mantine Select Stepper

Take full control over how options are displayed with the renderOption prop:

<SelectStepper
  data={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:

<SelectStepper
  data={['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

Mantine Styles API Integration

Fully integrated with Mantine's Styles API, SelectStepper allows you to customize every inner element:

<SelectStepper
  data={['React', 'Vue', 'Angular']}
  classNames={{
    root: 'custom-root',
    view: 'custom-view',
    action: 'custom-action',
  }}
/>
Enter fullscreen mode Exit fullscreen mode

10. Perfect for Forms

Form Example

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

Boolean Stepper Pattern

One clever pattern is using SelectStepper as an enhanced boolean toggle:

const [enabled, setEnabled] = useState(false);

<SelectStepper
  data={[
    { 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?

  1. Simplicity: Minimal setup, maximum functionality
  2. TypeScript: Full type safety with TypeScript support
  3. Accessibility: Built-in keyboard navigation
  4. Customization: Extensive styling options through Mantine's Styles API
  5. Performance: Smooth animations and optimized rendering
  6. Flexibility: Works in controlled and uncontrolled modes
  7. 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:

Top comments (0)