mirror of
https://github.com/Kong/insomnia.git
synced 2026-01-01 18:50:11 -05:00
e43bd82620
* feat: form component
* feat: use twMerge to support class overide
* Spike: Add markdown format doc support for base-components (#9368)
* initial check-in
* add things
* update select.mdx
* use react live things
* add package-json
* Revert "add package-json"
This reverts commit c57abf6178.
* update comment
* update docs
* type fix
* tailwind v4 upgrade
* upgrade tailwind v4 in docusaurus
* feat: add more components (#9426)
* update
* update
---------
Co-authored-by: Kent Wang <kent.wang@konghq.com>
87 lines
3.0 KiB
Plaintext
87 lines
3.0 KiB
Plaintext
---
|
|
id: input
|
|
sidebar_label: 'Input'
|
|
sidebar_position: 1
|
|
---
|
|
|
|
# Input
|
|
|
|
A flexible text input component built on React Aria's `Input` component with consistent styling and accessibility features.
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| -------------- | ---------------------------------------------------- | -------- | --------------------------------------------- |
|
|
| `label` | `string` | - | Optional label text displayed above the input |
|
|
| `placeholder` | `string` | - | Placeholder text shown when input is empty |
|
|
| `value` | `string` | - | Controlled value |
|
|
| `defaultValue` | `string` | - | Initial value for uncontrolled mode |
|
|
| `onChange` | `(value: string) => void` | - | Called when input value changes |
|
|
| `isDisabled` | `boolean` | `false` | Whether the input is disabled |
|
|
| `isReadOnly` | `boolean` | `false` | Whether the input is read-only |
|
|
| `isRequired` | `boolean` | `false` | Whether the input is required |
|
|
| `type` | `text \| search \| url \| tel \| email \| password` | `'text'` | HTML input type (text, email, password, etc.) |
|
|
|
|
Extends all [React Aria TextFieldProps](https://react-spectrum.adobe.com/react-aria/TextField.html#props).
|
|
|
|
## Usage Examples
|
|
|
|
### Default Input
|
|
|
|
```tsx live
|
|
<Input placeholder="Enter text..." />
|
|
```
|
|
|
|
### With Label
|
|
|
|
```tsx live
|
|
<Input label="Username" placeholder="Enter your username" />
|
|
```
|
|
|
|
### With Default Value
|
|
|
|
```tsx live
|
|
<Input label="Name" placeholder="Enter your name" defaultValue="John Doe" />
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
```tsx live
|
|
<Input label="Disabled Input" placeholder="Cannot edit" defaultValue="Disabled value" isDisabled />
|
|
```
|
|
|
|
### Read-Only State
|
|
|
|
```tsx live
|
|
<Input label="Read-Only Input" placeholder="Cannot edit" defaultValue="Read-only value" isReadOnly />
|
|
```
|
|
|
|
### Password Input
|
|
|
|
```tsx live
|
|
<Input label="Password" type="password" placeholder="Enter your password" isRequired />
|
|
```
|
|
|
|
### Search Input
|
|
|
|
```tsx live
|
|
function SearchInputDemo() {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
return <Input placeholder="Search..." type="search" value={searchQuery} onChange={setSearchQuery} />;
|
|
}
|
|
```
|
|
|
|
## Styling
|
|
|
|
### CSS Variables
|
|
|
|
The component uses the following CSS variables for theming:
|
|
|
|
- `--color-bg`: Input background color
|
|
- `--hl-sm`: Standard border color
|
|
- `--hl-lg`: Highlight for focus/active
|
|
- `--color-danger`: Error/invalid state color
|
|
|
|
You can customize these variables in your CSS to theme the input appearance.
|