## Background
### Description
Input for entering a number.
### User stories
//Add at least one user story.//
### History
Number inputs are part of the DSG and OOUI.
### Known use cases
- GrowthExperiments mentee filters form contains a NumberInput built in the GrowthExperiments extension (based on the CdxTextInput component)
- Codex docs site uses a number input on the [[ https://doc.wikimedia.org/codex/latest/components/demos/menu.html#with-scrolling-enabled | Menu demo page ]]
### Existing implementations
These artifacts are listed for historical context. The Figma spec, linked below, is the source of truth for the new component.
**Wikimedia community:**
- **Design style guide:** [[ https://design.wikimedia.org/style-guide/components/number-inputs.html | Number inputs ]]
- **OOUI:** NumberInput component in [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-inputs:~:text=v%C3%B4%20hi%E1%BB%87u%20h%C3%B3a-,NumberInputWidget,-NumberInputWidget%20(disabled) | OOUI ]]
- **Vue:**
- GrowthExperiments [[ https://github.com/wikimedia/mediawiki-extensions-GrowthExperiments/blob/master/modules/ext.growthExperiments.MentorDashboard/components/CNumberInput/CNumberInput.vue | CNumberInput ]]
**External libraries:**
- [[ https://buefy.org/documentation/numberinput | Buefy ]]
---
## Codex implementation
### Component task owners
- Designer: @bmartinezcalvo
- Developer: //add the main developer's name//
### Open questions
- //List any current open questions here//
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
| Component spec sheet |
#### Anatomy
//Designer should list the structure and properties of the component.//
#### Style
//Designer should list the visual features of the component.//
#### Interaction
//Designer should list interaction specifications.//
#### Documentation
//Designer should describe how the component should be documented, including configurable and standalone demos.//
---
## Acceptance criteria
### Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
**MVP scope**
- [] //List all parts of the MVP scope for this component//
**Design**
- [] Design the Figma spec sheet and add a link to it in this task
- [] Update the component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28). //This step will be done by a DST member.//
**Code**
- [] Implement the component in Codex
### Future work
- //If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.//