diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction.js
index 54d5a32ea056ed..d0518191dbbbd2 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction.js
@@ -16,10 +16,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref
}}
slotProps={{
incrementButton: {
- children: '▴',
+ children: ▴,
},
decrementButton: {
- children: '▾',
+ children: ▾,
},
}}
{...props}
@@ -116,8 +116,8 @@ const StyledButton = styled('button')(
height: 19px;
font-family: system-ui, sans-serif;
font-size: 0.875rem;
+ line-height: 1;
box-sizing: border-box;
- line-height: 1.2;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 0;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -141,5 +141,9 @@ const StyledButton = styled('button')(
grid-column: 2/3;
grid-row: 2/3;
}
+
+ & .arrow {
+ transform: translateY(-1px);
+ }
`,
);
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction.tsx
index df41c99be9c9d0..fbab0df46eda37 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction.tsx
@@ -20,10 +20,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(
}}
slotProps={{
incrementButton: {
- children: '▴',
+ children: ▴,
},
decrementButton: {
- children: '▾',
+ children: ▾,
},
}}
{...props}
@@ -120,8 +120,8 @@ const StyledButton = styled('button')(
height: 19px;
font-family: system-ui, sans-serif;
font-size: 0.875rem;
+ line-height: 1;
box-sizing: border-box;
- line-height: 1.2;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 0;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -145,5 +145,9 @@ const StyledButton = styled('button')(
grid-column: 2/3;
grid-row: 2/3;
}
+
+ & .arrow {
+ transform: translateY(-1px);
+ }
`,
);
diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
index 3fd2115b77585b..c634ff37ee997f 100644
--- a/docs/data/base/components/number-input/number-input.md
+++ b/docs/data/base/components/number-input/number-input.md
@@ -50,10 +50,10 @@ The following demo shows how to create a number input component, apply some styl
The `min` and `max` props can be used to define a range of accepted values. You can pass only one of them to define an open-ended range.
```tsx
-
+
- // Open-ended
-
+// Open-ended
+
```
The `step` prop can be used to defined the granularity of the change in value when incrementing or decrementing. For example, if `min={0}` and `step={2}`, valid values for the component would be 0, 2, 4… since the value can only be changed in increments of 2.
@@ -63,6 +63,10 @@ The `step` prop can be used to defined the granularity of the change in value wh
```
+:::warning
+Support for decimal values or step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38518) to see it arrive sooner!
+:::
+
When the input field is in focus, you can enter values that fall outside the valid range. The value will be clamped based on `min`, `max` and `step` once the input field is blurred.
Holding down the Shift key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.