---
title: "SpinBox"
description: "SpinBox api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

<CodeSnippetMD imagePath="/src/assets/generated/spinbox-example.png"  imageWidth="200" imageHeight="200"  imageAlt='spinbox example'>
```slint playground
import { SpinBox, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 50px;

    VerticalBox {
        alignment: center;

        SpinBox {
            value: 42;
        }
    }
}
```
</CodeSnippetMD>

## Properties

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
You can't interact with the spinbox if enabled is false.
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool" propertyVisibility="out">
Set to true when the spinbox currently has the focus.
</SlintProperty>

### value
<SlintProperty propName="value" typeName="int" defaultValue="0" propertyVisibility="in-out">
The value. Defaults to the minimum.
```slint "value: 50;"
SpinBox {
    value: 50;
}
```
</SlintProperty>

### minimum
<SlintProperty propName="minimum" typeName="int" defaultValue="0">
The minimum value.
```slint "minimum: 10;"
SpinBox {
    minimum: 10;
    value: 11;
}
```
</SlintProperty>

### maximum
<SlintProperty propName="maximum" typeName="int" defaultValue="100">
The maximum value.
```slint "maximum: 10;"
SpinBox {
    maximum: 10;
    value: 9;
}
```
</SlintProperty>

### read-only
<SlintProperty propName="read-only" typeName="bool" defaultValue="false">
If true, the user can't modify the value.
</SlintProperty>

### step-size
<SlintProperty propName="step-size" typeName="int" defaultValue="1">
The size that is used on increment or decrement of `value`.
</SlintProperty>

### horizontal-alignment
<SlintProperty propName="horizontal-alignment" typeName="enum" enumName="TextHorizontalAlignment" defaultValue="left">
The horizontal alignment of the text.
</SlintProperty>

## Callbacks

### edited(int)
Emitted when the value has changed because the user modified it

```slint {2-4}
SpinBox {
    edited(value) => {
        debug("New value: ", value);
    }
}
```