mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
fd72ad7430
* docs: add API Reference sections to all component documentation - Add comprehensive API Reference sections to 36 component docs - Document custom props, variants, and behaviors for each component - Distinguish between Base UI aliases and custom components - Include prop tables with Type, Default, and Description columns - Follow alert-dialog.mdx as the reference standard for quality Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: add essential inline examples and 'Also exported as' notes - Add inline code example for Menu's inset prop showing alignment pattern - Add 'Also exported as ToggleGroupItem' note to Toggle component - Add ToggleGroupSeparator to toggle-group documentation - Add 'Also exported as RadioGroupItem' note to Radio component Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix section ordering - API Reference before Examples Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: remove references to non-exported components Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix inaccurate API documentation per Cubic AI review Co-Authored-By: pasquale@cal.com <pasquale@cal.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com>
101 lines
2.0 KiB
Plaintext
101 lines
2.0 KiB
Plaintext
---
|
|
title: Input
|
|
description: A native input element.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/input#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-input-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/input
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="input" title="components/ui/input.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Input } from "@/components/ui/input"
|
|
```
|
|
|
|
```tsx
|
|
<Input />
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Input
|
|
|
|
Styled wrapper for `Input` from Base UI with custom size options.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ---------- | ------------------------------------- | ----------- | ------------------------------------------------ |
|
|
| `size` | `"sm" \| "default" \| "lg" \| number` | `"default"` | Controls the input height. Number values are passed to the native `size` attribute |
|
|
| `unstyled` | `boolean` | `false` | When true, removes the wrapper styling (border, shadow, etc.) |
|
|
|
|
## Examples
|
|
|
|
For accessible labelling and validation, prefer using the `Field` component to wrap inputs, or the `FieldControl` component. See some [related examples](/ui/docs/components/field).
|
|
|
|
### Small Size
|
|
|
|
<ComponentPreview name="p-input-2" />
|
|
|
|
### Large Size
|
|
|
|
<ComponentPreview name="p-input-3" />
|
|
|
|
### Disabled
|
|
|
|
<ComponentPreview name="p-input-4" />
|
|
|
|
### File
|
|
|
|
<ComponentPreview name="p-input-5" />
|
|
|
|
### With Label
|
|
|
|
<ComponentPreview name="p-input-6" />
|
|
|
|
### With Button
|
|
|
|
<ComponentPreview name="p-input-7" />
|
|
|
|
### Form Integration
|
|
|
|
<ComponentPreview name="p-form-1" />
|