Input

TSX
import { Input } from "@/components/ui/input";

export default function InputDemo() {
  return (
    <div className="w-full max-w-sm">
      <Input type="email" placeholder="name@example.com" />
    </div>
  );
}

TSX
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function InputFile() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-file">Resume</Label>
      <Input id="input-file" type="file" />
    </div>
  );
}

TSX
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function InputRequired() {
  return (
    <form className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-required">
        Email <span className="text-destructive">*</span>
      </Label>
      <Input
        id="input-required"
        type="email"
        placeholder="name@example.com"
        required
      />
    </form>
  );
}

TSX
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function InputDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-disabled">Username</Label>
      <Input id="input-disabled" defaultValue="emma" disabled />
    </div>
  );
}

TSX
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function InputInvalid() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-invalid">Workspace URL</Label>
      <Input
        id="input-invalid"
        defaultValue="seven ui"
        aria-invalid="true"
        aria-describedby="input-invalid-error"
      />
      <p id="input-invalid-error" className="text-sm text-destructive">
        The URL can&apos;t contain spaces.
      </p>
    </div>
  );
}