mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.

2026-03-01 10:52:46 +08:00

3.0 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Input	Text input component for forms and user input	auto

Input

Overview

The Input component provides a styled text input field that extends the native HTML input element with consistent styling and error state support.

Live Demo

:::demo input-variants Shows all input states including default, error, and disabled :::

Props

States

Default

Standard input field with border and focus ring.

Error

Error state with destructive border color. Set the error prop to true.

Disabled

Disabled state with reduced opacity. Set the disabled prop to true.

Focus

Focused state with ring outline.

Usage Examples

Basic Input

import { Input } from '@/components/ui/Input'

function Example() {
  return <input type="text" placeholder="Enter text..." />
}

Controlled Input

import { Input } from '@/components/ui/Input'

function Example() {
  const [value, setValue] = useState('')

  return (
    <Input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter text..."
    />
  )
}

Input with Error State

import { Input } from '@/components/ui/Input'

function Example() {
  return (
    <Input
      type="text"
      error
      placeholder="Invalid input..."
    />
  )
}

Password Input

import { Input } from '@/components/ui/Input'

function Example() {
  return <Input type="password" placeholder="Enter password..." />
}

Accessibility

Keyboard Navigation: Full native keyboard support
ARIA Attributes: Supports all standard input ARIA attributes
Focus Visible: Clear focus indicator for keyboard navigation
Error State: Visual indication for error state (use with aria-invalid and aria-describedby)

3.0 KiB Raw Blame History