# Stepper

An increment/decrement control with up and down chevrons.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="stepper/Basic" />

## Import [#import]

```rust
use maccn::MacStepper;
```

## Usage [#usage]

```rust
MacStepper::new("quantity")
    .on_increment(|_, _| {
        println!("Incremented");
    })
    .on_decrement(|_, _| {
        println!("Decremented");
    });
```

## With a text field [#with-a-text-field]

<ComponentPreview name="stepper/WithTextField" />

```rust
use gpui::div;
use maccn::{MacStepper, MacTextField};

let entity = cx.entity().downgrade();

div()
    .flex()
    .items_center()
    .gap_2()
    .child(MacTextField::new("stepper-field", &state).w(px(60.)))
    .child(
        MacStepper::new("stepper-paired").on_increment({
            let entity = entity.clone();
            move |window, cx| {
                _ = entity.update(cx, |this, cx| {
                    this.stepper_value = (this.stepper_value + 1).min(99);
                    let value = this.stepper_value;
                    this.stepper_input.update(cx, |state, cx| {
                        state.set_value(value.to_string(), window, cx);
                    });
                    cx.notify();
                });
            }
        }).on_decrement({
            let entity = entity.clone();
            move |window, cx| {
                _ = entity.update(cx, |this, cx| {
                    this.stepper_value = (this.stepper_value - 1).max(0);
                    let value = this.stepper_value;
                    this.stepper_input.update(cx, |state, cx| {
                        state.set_value(value.to_string(), window, cx);
                    });
                    cx.notify();
                });
            }
        }),
    )
```

## Sizes [#sizes]

<ComponentPreview name="stepper/Sizes" />

```rust
use gpui::div;
use maccn::{MacControlSize, MacStepper};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(MacStepper::new("stepper-xl").size(MacControlSize::ExtraLarge))
    .child(MacStepper::new("stepper-l").size(MacControlSize::Large))
    .child(MacStepper::new("stepper-r"))
    .child(MacStepper::new("stepper-s").size(MacControlSize::Small))
    .child(MacStepper::new("stepper-m").size(MacControlSize::Mini))
```

## Disabled [#disabled]

<ComponentPreview name="stepper/Disabled" />

```rust
MacStepper::new("stepper-d").disabled(true)
```

## API [#api]

### Props [#props]

| Prop       | Type             | Default   |
| ---------- | ---------------- | --------- |
| `size`     | `MacControlSize` | `Regular` |
| `disabled` | `bool`           | `false`   |

### Events [#events]

| Event          | Payload                   |
| -------------- | ------------------------- |
| `on_increment` | `(&mut Window, &mut App)` |
| `on_decrement` | `(&mut Window, &mut App)` |