136 lines
5.2 KiB
Plaintext
136 lines
5.2 KiB
Plaintext
|
# Number Field
|
||
|
|
|
||
|
|
Number Field wraps Base UI's number field primitive with the Tailwind classes from the official Base UI example.
|
||
|
|
|
||
|
|
::example{src="components/number-field/number-field.tsx"}
|
||
|
|
|
||
|
|
## Anatomy
|
||
|
|
|
||
|
|
### Base UI Style
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import NumberField from "@/components/ui/number-field"
|
||
|
|
|
||
|
|
<NumberField.Root defaultValue={100}>
|
||
|
|
<NumberField.ScrubArea>
|
||
|
|
<label>Amount</label>
|
||
|
|
<NumberField.ScrubAreaCursor />
|
||
|
|
</NumberField.ScrubArea>
|
||
|
|
<NumberField.Group>
|
||
|
|
<NumberField.Decrement />
|
||
|
|
<NumberField.Input />
|
||
|
|
<NumberField.Increment />
|
||
|
|
</NumberField.Group>
|
||
|
|
</NumberField.Root>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Shadcn Style
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import {
|
||
|
|
NumberField,
|
||
|
|
NumberFieldDecrement,
|
||
|
|
NumberFieldGroup,
|
||
|
|
NumberFieldIncrement,
|
||
|
|
NumberFieldInput,
|
||
|
|
} from "@/components/ui/number-field"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Composition
|
||
|
|
|
||
|
|
Use the following composition to build `NumberField`:
|
||
|
|
|
||
|
|
```txt
|
||
|
|
NumberField
|
||
|
|
├── NumberFieldInput
|
||
|
|
├── NumberFieldGroup
|
||
|
|
├── NumberFieldIncrement
|
||
|
|
├── NumberFieldDecrement
|
||
|
|
├── NumberFieldScrubArea
|
||
|
|
└── NumberFieldScrubAreaCursor
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## API Reference
|
||
|
|
|
||
|
|
Official API: [Base UI Number Field API](https://base-ui.com/react/components/number-field#api-reference).
|
||
|
|
|
||
|
|
This wrapper preserves the underlying Base UI Number Field API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.
|
||
|
|
|
||
|
|
### Root
|
||
|
|
|
||
|
|
`NumberField` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
|
||
|
|
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
|
||
|
|
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |
|
||
|
|
|
||
|
|
### Group
|
||
|
|
|
||
|
|
`NumberField.Group` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|
||
|
|
|
||
|
|
### Increment
|
||
|
|
|
||
|
|
`NumberField.Increment` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|
||
|
|
|
||
|
|
### Decrement
|
||
|
|
|
||
|
|
`NumberField.Decrement` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|
||
|
|
|
||
|
|
### Input
|
||
|
|
|
||
|
|
`NumberField.Input` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|
||
|
|
|
||
|
|
### ScrubArea
|
||
|
|
|
||
|
|
`NumberField.ScrubArea` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|
||
|
|
|
||
|
|
### ScrubAreaCursor
|
||
|
|
|
||
|
|
`NumberField.ScrubAreaCursor` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|