ComponentSite and product

Input

Single-line text input with hover, focus, invalid, and disabled states.

$ npx context-ds add input

On the site

In the product

Usage

Use it for

Any single-line text entry. Pair with Label.

Avoid

Gray filled fields
Placeholder as the only label

Example

examples/input.tsx

"use client";import { useState } from "react";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";// Empty with a placeholder, filled, invalid and disabled.export function Product() {  const [email, setEmail] = useState("anwar@");  const [valid, setValid] = useState(false);  return (    <div className="grid w-full max-w-sm gap-4">      <div className="grid gap-2">        <Label htmlFor="input-url">Website</Label>        <Input id="input-url" placeholder="https://acme.com" />      </div>      <div className="grid gap-2">        <Label htmlFor="input-name">Key name</Label>        <Input id="input-name" defaultValue="Production" />      </div>      <div className="grid gap-2">        <Label htmlFor="input-email">Email</Label>        <Input id="input-email" type="email" required value={email} aria-invalid={!valid} onChange={(event) => { setEmail(event.target.value); setValid(event.target.validity.valid); }} />      </div>      <div className="group grid gap-2" data-disabled="true">        <Label htmlFor="input-org">Organization ID</Label>        <Input id="input-org" defaultValue="org_3f9a2c" disabled />      </div>    </div>  );}export function Site() {  return (    <div className="grid w-full max-w-sm gap-2">      <Label htmlFor="input-work-email">Work email</Label>      <Input id="input-work-email" type="email" placeholder="you@company.com" />    </div>  );}

Source

components/ui/input.tsx

import * as React from "react";import { cn } from "@/lib/utils";// The dashboard's field (INPUT_CLASS): 40px, a light border that darkens on hover and turns brand blue on focus.function Input({ className, type, ...props }: React.ComponentProps<"input">) {  return (    <input      type={type}      data-slot="input"      className={cn(        "flex h-10 w-full min-w-0 rounded-control border border-line bg-surface px-3.5 text-body-sm text-fg transition-[border-color,box-shadow] duration-150 ease-out outline-none placeholder:text-fg-subtle hover:border-line-strong focus:border-brand disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger file:border-0 file:bg-transparent file:text-body-sm file:text-fg motion-reduce:transition-none",        className,      )}      {...props}    />  );}export { Input };

Reference: context-dashboard c0ddf7a src/components/ui/form.tsx.