Input

A native input element.

Installation


pnpm dlx shadcn@latest add @coss/input

Usage

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

<Input />

API Reference

Input

Styled wrapper for Input from Base UI with custom size options.

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| number`	`"default"`	Controls the input height. Number values are passed to the native `size` attribute
`unstyled`	`boolean`	`false`	When true, removes the wrapper styling (border, shadow, etc.)

Examples

For accessible labelling and validation, prefer using the Field component to wrap inputs, or the FieldControl component. See some related examples.

Small Size

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

export default function Particle() {
  return (
    <Input
      aria-label="Enter text"
      placeholder="Enter text"
      size="sm"
      type="text"
    />
  );
}

Large Size

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

export default function Particle() {
  return (
    <Input
      aria-label="Enter text"
      placeholder="Enter text"
      size="lg"
      type="text"
    />
  );
}

Disabled

File

With Label

import { useId } from "react";

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

export default function Particle() {
  const id = useId();
  return (
    <div className="flex flex-col items-start gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input
        aria-label="Email"
        id={id}
        placeholder="[email protected]"
        type="email"
      />
    </div>
  );
}

With Button

import { Button } from "@/components/ui/button";
import { Group } from "@/components/ui/group";
import { Input } from "@/components/ui/input";

export default function Particle() {
  return (
    <Group aria-label="Email subscription" className="gap-2">
      <Input
        aria-label="Email"
        className="flex-1"
        placeholder="[email protected]"
        type="email"
      />
      <div>
        <Button variant="outline">Send</Button>
      </div>
    </Group>
  );
}

Form Integration

"use client";

import type { FormEvent } from "react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";

export default function Particle() {
  const [loading, setLoading] = useState(false);
  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    setLoading(true);
    await new Promise((r) => setTimeout(r, 800));
    setLoading(false);
    alert(`Email: ${formData.get("email") || ""}`);
  };

  return (
    <Form className="max-w-64" onSubmit={onSubmit}>
      <Field name="email">
        <FieldLabel>Email</FieldLabel>
        <Input
          disabled={loading}
          placeholder="[email protected]"
          required
          type="email"
        />
        <FieldError>Please enter a valid email.</FieldError>
      </Field>
      <Button disabled={loading} type="submit">
        Submit
      </Button>
    </Form>
  );
}

On This Page

Installation Usage API Reference Input Examples Small Size Large Size Disabled File With Label With Button Form Integration