HelpTribe.
Home
HT|UI
GitHub

Input

Clean text input with 1px border, white background, and 4px radius. Includes Label sub-component for form accessibility.

Installation

$ npx shadcn@latest add input

Preview

Error State

Password must be at least 8 characters.

Usage (React/TSX)

import { Input, Label } from "@/components/ui/input"

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Enter your email" />
    </div>
  )
}

Usage (HTML/CSS)

<input type="text" class="ds-input" placeholder="Enter text..." />

<style>
  .ds-input {
    background: #ffffff;
    color: #18181b;
    padding: 12px 16px;
    font-family: 'Satoshi', sans-serif;
    font-size: 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
  }
  .ds-input::placeholder {
    color: #71717a;
  }
  .ds-input:focus {
    border-color: #A100FF;
    outline: 2px solid #A100FF;
    outline-offset: 2px;
  }
</style>

Props

PropTypeDefaultDescription
typestring"text"The input type (text, email, password, etc.).
placeholderstring—Placeholder text when empty.
errorbooleanfalseShows error state with red border.
disabledbooleanfalseDisables the input.
classNamestring—Additional CSS classes to apply.

Label Props

PropTypeDefaultDescription
htmlForstring—Associates the label with an input.
classNamestring—Additional CSS classes to apply.
childrenReactNode—Label text content.

Design Notes

  • 1px border, white background, 4px radius. Clean, no decoration.
  • Focus: Electric Violet border, 2px outline offset. No glow, no shadow.
  • Error: Destructive red border (#ef4444). Error text in same red.
  • Placeholder: Muted text (#71717a), 4.5:1 contrast ratio.
  • Label uses uppercase with 0.05em tracking for metadata style.