Input

import { TextInput } from '@/components'

<TextInput placeholder="Enter your name..." />

<TextInput
  label="Email Address"
  placeholder="john@example.com"
  hint="We'll never share your email with anyone."
/>

<TextInput size="sm" label="Small Input" placeholder="Small size..." />

<TextInput size="md" label="Medium Input" placeholder="Medium size..." />

<TextInput size="lg" label="Large Input" placeholder="Large size..." />

<TextInput
  label="Username"
  placeholder="Enter username..."
  hint="This field is required"
  required
/>

<TextInput
  label="Nickname"
  placeholder="Enter nickname..."
  showOptionalBadge
/>

<TextInput
  label="API Key"
  placeholder="Enter your API key..."
  hint="Keep your API key secure"
  tooltip="Your API key is used to authenticate requests to the server. Never share it publicly."
/>

<TextInput
  label="Username"
  placeholder="Enter username..."
  leftIcon={<User />}
/>

<TextInput
  label="Search"
  placeholder="Search..."
  rightIcon={<Search />}
/>

<TextInput
  label="Email"
  placeholder="Search contacts..."
  leftIcon={<Mail />}
  rightIcon={<Search />}
/>

<TextInput
  label="Quick Search"
  placeholder="Search..."
  leftIcon={<Search />}
  kbd="⌘+K"
/>

<TextInput
  label="Email"
  placeholder="Enter email..."
  error="Please enter a valid email address"
/>

<TextInput
  label="Password"
  type="password"
  error
  hint="Password must be at least 8 characters"
/>

<TextInput label="Disabled" placeholder="Cannot edit..." disabled />

import { Input } from '@/components'

<Input.Root size="md" required>
  <Input.Label>
    Full Name
    <Input.RequiredIndicator />
    <Input.InfoIcon />
  </Input.Label>
  <Input.Field>
    <Input.LeftSlot>
      <User />
    </Input.LeftSlot>
    <Input.NativeInput placeholder="Enter your full name..." />
  </Input.Field>
  <Input.Hint>Please enter your legal name.</Input.Hint>
</Input.Root>

import { PasswordInput } from '@/components'

<PasswordInput label="Password" placeholder="Enter password..." />

<PasswordInput label="Password" showLeftIcon={false} />

const [password, setPassword] = useState('')
const passedCount = defaultRequirements.filter((req) => req.validator(password)).length
const isComplete = passedCount === defaultRequirements.length

<PasswordInput
  label="Create Password"
  required
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  error={password.length > 0 && !isComplete}
/>
<PasswordStrength password={password} />

const [showPassword, setShowPassword] = useState(false)

<Input.Root size="md" required>
  <Input.Label>
    Password
    <Input.RequiredIndicator />
  </Input.Label>
  <Input.Field>
    <Input.LeftSlot>
      <Lock />
    </Input.LeftSlot>
    <Input.NativeInput
      type={showPassword ? 'text' : 'password'}
      placeholder="Enter password..."
    />
    <Input.RightSlot>
      <button onClick={() => setShowPassword(!showPassword)}>
        {showPassword ? <EyeClosed /> : <Eye />}
      </button>
    </Input.RightSlot>
  </Input.Field>
  <Input.Hint>Must be at least 8 characters</Input.Hint>
</Input.Root>

const [value, setValue] = useState('')
const isValid = value.length >= 3

<TextInput
  label="Username"
  placeholder="Enter username..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error={value.length > 0 && !isValid ? 'Username must be at least 3 characters' : undefined}
  hint={isValid ? 'Username is valid!' : 'Minimum 3 characters required'}
  required
/>