Maofeng
4efe3f3c64
Add Vite, React, MDX, and Tailwind documentation infrastructure. Document component, handbook, overview, and utility routes. Add interactive examples for every component family. Deduplicate React resolution and load the Tailwind 4 theme configuration.
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. |
|