InputSizeContext
Context utilities for sharing input sizes across composed controls.
Quick Preview
Usage
<InputSizeProvider size="lg"><Input placeholder="Large input" /></InputSizeProvider>When no InputSizeProvider is present, input primitives also inherit sm, md, or lg from the nearest shared SizeProvider, including DialogContent and SheetContent. Use InputSizeProvider only when an input-only xl size is required.
Examples
Default InputSizeContext
Use this as the starting point for InputSizeContext. Keep product data, routing, fetching, and authorization logic in the consuming app.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
size | `"sm" | "md" | "lg" |
fallback in hook | input size | "md" | Fallback when no provider exists. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.