Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A Stepper allows a user to choose a number between a minimum and maximum value. It may be "stepped", so that its value only changes in increments of a given number.

PropTypeNotes
valuenumber
disabledboolean
validationfunction
onValueChangefunction
minnumberThe input's minimum value.
maxnumberThe input's maximum value.
stepnumberThe input's step.

See the Inputs section for more on how inputs work in Learn.

Examples

// Overrides

import { Override } from 'framer'

export function StepperExample(): Override {
	return {
		min: 0,
		max: 100,
		value: 60,
		step: 1,
		validation: (value) => value <= 10,
		onValueChange: (value, valid) =>
			console.log('Value: ' + value, 'Valid' + valid),
	}
}
// Code component

import * as React from 'react'
import { Frame } from 'framer'
// @ts-ignore
import { Slider } from '@framer/steveruizok.education/code'

export const StepperExample = (props) => {

  const handleValueChange = (value, valid) =>
			console.log('Value: ' + value, 'Valid' + valid),
	}

	return (
		<Frame size="100%" background="none">
			<Slider
				min={0}
				max={100}
        value={60}
        step={1}
				validation={(value) => value <= 10}
				onValueChange={handleValueChange}
				center
			/>
		</Frame>
	)
}