Clidey UXDocs

Input

The input.tsx module exports three components: Input for single-line text, TextArea for multi-line text, and SearchInput for search fields with a built-in icon.

Interactive example#

Input · Live example

16 characters in the workspace name

Edit the fields, reveal the password, or disable the controls.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { Input, TextArea, SearchInput } from '@clidey/ux';

Input#

A styled single-line text field. All input variants include min-w-0 so they shrink correctly inside flex containers without overflowing.

TSX

<Input placeholder="Enter your name" />

With label

TSX

import { Label, Input } from '@clidey/ux';

<div className="space-y-1">
  <Label htmlFor="email">Email address</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Password field with toggle

Set type="password" and showPasswordToggle to add an eye icon that reveals the password:

TSX

<Input
  type="password"
  showPasswordToggle
  placeholder="Enter your password"
/>

Disabled state

TSX

<Input disabled placeholder="Not editable" />

Input Props

PropTypeDefaultDescription
showPasswordTogglebooleanfalseShows an eye icon button to toggle password visibility. Only useful when type="password".
typestring"text"HTML input type ("text", "email", "password", "number", etc.).
placeholderstring—Placeholder text shown when the field is empty.
disabledbooleanfalseDisables interaction.
classNamestring—Additional CSS classes.

All standard <input> HTML attributes are accepted.

TextArea#

A styled multi-line text field.

TSX

<TextArea placeholder="Write your message..." rows={4} />

With label

TSX

<div className="space-y-1">
  <Label htmlFor="bio">Bio</Label>
  <TextArea id="bio" placeholder="Tell us about yourself..." rows={3} />
</div>

TextArea Props

All standard <textarea> HTML attributes are accepted, including rows, cols, disabled, placeholder, and onChange.

SearchInput#

A text field with a search icon on the left side. Useful for filter fields, command inputs, and search bars.

TSX

<SearchInput placeholder="Search users..." />

TSX

import { useState } from 'react';

function SearchBar() {
  const [query, setQuery] = useState('');

  return (
    <SearchInput
      placeholder="Search..."
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

SearchInput Props

Accepts all standard <input> HTML attributes. The search icon is rendered automatically.

Full form example#

TSX

import { Input, TextArea, Label, Button } from '@clidey/ux';

function ContactForm() {
  return (
    <form className="space-y-4 max-w-md">
      <div className="space-y-1">
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="Jane Doe" />
      </div>
      <div className="space-y-1">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="jane@example.com" />
      </div>
      <div className="space-y-1">
        <Label htmlFor="message">Message</Label>
        <TextArea id="message" placeholder="Your message..." rows={4} />
      </div>
      <Button type="submit" className="w-full">Send</Button>
    </form>
  );
}

Was this page helpful?

← ActionsButtonGroupInputs →Checkbox