Mutates an a <input type='number'> tag into a field with a pair of buttons next to it that can be used to "spin" a numeric value up or down by a specified increment.
Use <base-input-spinner> component which will render the default input spinner. To control the width of the spinner, add a width with a Tailwindcss class name to the component.
Add inside the <base-input-spinner> the text which you want to show in the label without any closing tag. Check the example below.
Use [disabled]="true" inside <base-input-spinner> component to disable it.
Run the following command to add this component to your project:
npx base-ui-cli add input-spinner
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add input-spinner
// Paths are relative to aliases.components (default: src/app/components)
import { InputSpinnerComponent } from './input-spinner/input-spinner.component';
@Component({
selector: 'app-your-component',
imports: [
InputSpinnerComponent
],
template: `...`
})
export class YourComponent {} API for input-spinner — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-input-spinner | class | string | '' | Additional host CSS classes (merged via cn()). |
base-input-spinner | classes | string | '' | — |
base-input-spinner | min | number | 0 | — |
base-input-spinner | max | unknown | Infinity | — |
base-input-spinner | step | number | 1 | — |
base-input-spinner | disabled | boolean | false | Whether the control is disabled (consumer-facing input). |
Content