Components
- KonstaProvider
- App
- Action Sheet
- Badge
- Block
- Breadcrumbs
- Button
- Contacts List
- Card
- Checkbox
- Chip
- Data Table
- Dialog
- Floating Action Button
- Icon
- Link
- List
- List Button
- List Input
- List Item
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Segmented Control
- Sheet Modal
- Stepper
- Tabbar
- Toast
- Toggle
- Toolbar
- Toolbar Pane
Stepper React Component
Contents
Stepper Components
There are following components included:
Stepper
Stepper Props
| Name | Type | Default | Description |
|---|---|---|---|
| buttonsOnly | boolean | false | Disables inner value container between stepper buttons |
| colors | object | Object with Tailwind CSS colors classes | |
| colors.clearBgIos | string | 'bg-transparent active:bg-primary/15' | |
| colors.clearBgMaterial | string | 'bg-transparent' | |
| colors.fillBgIos | string | 'bg-primary active:bg-ios-primary-shade'' | |
| colors.fillBgMaterial | string | 'bg-md-light-primary dark:bg-md-dark-primary' | |
| colors.fillTextIos | string | 'text-white' | |
| colors.fillTextMaterial | string | 'text-md-light-on-primary dark:text-md-dark-on-primary' | |
| colors.fillTouchRipple | string | 'touch-ripple-white dark:touch-ripple-primary' | |
| colors.outlineBgIos | string | 'bg-transparent active:bg-primary/15' | |
| colors.outlineBgMaterial | string | 'bg-transparent' | |
| colors.outlineBorderIos | string | 'border-primary' | |
| colors.outlineBorderMaterial | string | 'border-md-light-outline dark:border-md-dark-outline' | |
| colors.textIos | string | 'text-primary' | |
| colors.textMaterial | string | 'text-md-light-primary dark:text-md-dark-primary' | |
| colors.touchRipple | string | 'touch-ripple-primary' | |
| component | string | 'div' | Component's HTML Element |
| defaultValue | number | Stepper input default value, in case of uncontrolled component | |
| input | boolean | false | Defines should it render element or not |
| inputDisabled | boolean | false | Defines whether the stepper input is disabled or not |
| inputPlaceholder | string | Input placeholder | |
| inputReadOnly | boolean | false | Defines whether the stepper input is read only or not |
| inputType | string | 'text' | Input type |
| large | boolean | undefined | Makes stepper large. Overwrites |
| largeIos | boolean | false | Makes stepper large in iOS theme |
| largeMaterial | boolean | false | Makes stepper large in Material theme |
| onBlur | function(e) | Stepper input | |
| onChange | function(e) | Stepper input | |
| onFocus | function(e) | Stepper input | |
| onInput | function(e) | Stepper input | |
| onMinus | function(e) | Stepper "minus" button click handler | |
| onPlus | function(e) | Stepper "plus" button click handler | |
| outline | boolean | undefined | Makes stepper outline. Overwrites |
| outlineIos | boolean | false | Makes stepper outline in iOS theme |
| outlineMaterial | boolean | false | Makes stepper outline in Material theme |
| raised | boolean | undefined | Makes stepper raised (with shadow). Overwrites |
| raisedIos | boolean | false | Makes stepper raised (with shadow) in iOS theme |
| raisedMaterial | boolean | false | Makes stepper raised (with shadow) in Material theme |
| rounded | boolean | undefined | Makes stepper round. Overwrites |
| roundedIos | boolean | false | Makes stepper round in iOS theme |
| roundedMaterial | boolean | false | Makes stepper round in Material theme |
| small | boolean | undefined | Makes stepper small. Overwrites |
| smallIos | boolean | false | Makes stepper small in iOS theme |
| smallMaterial | boolean | false | Makes stepper small in Material theme |
| value | number | 0 | Stepper value |
Examples
import React, { useState } from 'react';import {Page,Navbar,NavbarBackLink,Stepper,Block,BlockTitle,List,ListItem,} from 'konsta/react';export default function StepperPage() {const [value, setValue] = useState(1);const increase = () => {setValue(value + 1);};const decrease = () => {setValue(value - 1 < 0 ? 0 : value - 1);};const [inputValue, setInputValue] = useState(1);const increaseInput = () => {const v = parseInt(inputValue, 10);if (isNaN(v)) setInputValue(0);else setInputValue(v + 1);};const decreaseInput = () => {const v = parseInt(inputValue, 10);if (isNaN(v)) setInputValue(0);setInputValue(v - 1 < 0 ? 0 : v - 1);};const onInputChange = (e) => {setInputValue(e.target.value);};const onInputBlur = () => {if (isNaN(parseInt(inputValue, 10))) setInputValue(0);};return (<Page><Navbartitle="Stepper"/><BlockTitle>Shape and size</BlockTitle><Block strong inset className="text-center space-y-4"><div className="grid grid-cols-2 gap-4"><div><div className="block text-xs mb-1">Default</div><Stepper value={value} onPlus={increase} onMinus={decrease} /></div><div><div className="block text-xs mb-1">Round</div><Steppervalue={value}roundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Outline</div><Steppervalue={value}outlineonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Rounded Outline</div><Steppervalue={value}outlineroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Small</div><Stepper value={value} onPlus={increase} onMinus={decrease} small /></div><div><div className="block text-xs mb-1">Small Round</div><Steppervalue={value}smallroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Small Outline</div><Steppervalue={value}smalloutlineonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Small Rounded Outline</div><Steppervalue={value}smallroundedoutlineonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Large</div><Stepper value={value} onPlus={increase} onMinus={decrease} large /></div><div><div className="block text-xs mb-1">Large Round</div><Steppervalue={value}largeroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Large Outline</div><Steppervalue={value}largeoutlineonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Large Rounded Outline</div><Steppervalue={value}largeroundedoutlineonPlus={increase}onMinus={decrease}/></div></div></Block><BlockTitle>Raised</BlockTitle><Block strong inset className="text-center space-y-4"><div className="grid grid-cols-2 gap-4"><div><div className="block text-xs mb-1">Default</div><Steppervalue={value}raisedonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Round</div><Steppervalue={value}raisedroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Outline</div><Steppervalue={value}raisedoutlineonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Round Outline</div><Steppervalue={value}raisedoutlineroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Small</div><Steppervalue={value}raisedsmallonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Small Round</div><Steppervalue={value}raisedsmallroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Small Outline</div><Steppervalue={value}raisedsmalloutlineonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Small Rounded Outline</div><Steppervalue={value}raisedsmallroundedoutlineonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Large</div><Steppervalue={value}raisedlargeonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Large Round</div><Steppervalue={value}raisedlargeroundedonPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4 margin-top"><div><div className="block text-xs mb-1">Large Outline</div><Steppervalue={value}raisedlargeoutlineonPlus={increase}onMinus={decrease}/></div><div><div className="block text-xs mb-1">Large Rounded Outline</div><Steppervalue={value}raisedlargeroundedoutlineonPlus={increase}onMinus={decrease}/></div></div></Block><BlockTitle>With Text Input</BlockTitle><Block strong inset className="text-center space-y-4"><div><Steppervalue={inputValue}inputonChange={onInputChange}onBlur={onInputBlur}onPlus={increaseInput}onMinus={decreaseInput}/></div><div><Steppervalue={inputValue}outlineinputonChange={onInputChange}onBlur={onInputBlur}onPlus={increaseInput}onMinus={decreaseInput}/></div></Block><BlockTitle>Only Buttons</BlockTitle><List strong inset><ListItemtitle={`Value is ${value}`}after={<Steppervalue={value}buttonsOnlyroundedonPlus={increase}onMinus={decrease}/>}/><ListItemtitle={`Value is ${value}`}after={<Steppervalue={value}roundedoutlinebuttonsOnlyonPlus={increase}onMinus={decrease}/>}/><ListItemtitle={`Value is ${value}`}after={<Steppervalue={value}roundedraisedoutlinebuttonsOnlyonPlus={increase}onMinus={decrease}/>}/></List><BlockTitle>Colors</BlockTitle><Block strong inset className="text-center space-y-4"><div className="grid grid-cols-2 gap-4"><div><Steppervalue={value}className="k-color-brand-red"onPlus={increase}onMinus={decrease}/></div><div><Steppervalue={value}roundedclassName="k-color-brand-green"onPlus={increase}onMinus={decrease}/></div></div><div className="grid grid-cols-2 gap-4"><div><Steppervalue={value}className="k-color-brand-yellow"onPlus={increase}onMinus={decrease}/></div><div><Steppervalue={value}roundedclassName="k-color-brand-purple"onPlus={increase}onMinus={decrease}/></div></div></Block></Page>);}
Code licensed under MIT.
2025 © Konsta UI by 
.
.