Input Spinner

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.

free

Playground

disabled

HTML

<ply-input-spinner>Input Spinner</ply-input-spinner>

Default Input spinner

Use <ply-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.

HTML

<form action="">
    <ply-input-spinner class="w-[150px]"></ply-input-spinner>
</form>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-input-spinner-example',
  imports: [
    InputSpinnerComponent
  ],
  template: `...`
})
export class InputSpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add input-spinner

Input spinner with label

Add inside the <ply-input-spinner> the text which you want to show in the label without any closing tag. Check the example below.

HTML

<form action="">
    <ply-input-spinner class="w-[150px]">Choose quantity</ply-input-spinner>
</form>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-input-spinner-example',
  imports: [
    InputSpinnerComponent
  ],
  template: `...`
})
export class InputSpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add input-spinner

Input spinner Disabled

Use [disabled]="true" inside <ply-input-spinner> component to disable it.

HTML

<form action="">
    <ply-input-spinner class="w-[150px]"></ply-input-spinner>
</form>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-input-spinner-example',
  imports: [
    InputSpinnerComponent
  ],
  template: `...`
})
export class InputSpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add input-spinner

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add input-spinner

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-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 reference for input-spinner
API	Member	Type	Default	Description
`ply-input-spinner`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-input-spinner`	`classes`	`string`	`''`	—
`ply-input-spinner`	`min`	`number`	`0`	—
`ply-input-spinner`	`max`	`unknown`	`Infinity`	—
`ply-input-spinner`	`step`	`number`	`1`	—
`ply-input-spinner`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).