Input | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/input

pnpm dlx shadcn@latest add @cortexcn/input

Usage

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

Examples

Basic

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

export function InputBasic() {
  return (
    <div className="flex flex-col gap-6">
      <Input type="email" placeholder="Email" />
    </div>
  )
}

import { Input } from "@/components/input"export function InputBasic() {  return (    <div className="flex flex-col gap-6">      <Input type="email" placeholder="Email" />    </div>  )}

Invalid

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

export function InputInvalid() {
  return (
    <div className="flex flex-col gap-6">
      <Input type="text" placeholder="Error" aria-invalid="true" />
    </div>
  )
}

import { Input } from "@/components/input"export function InputInvalid() {  return (    <div className="flex flex-col gap-6">      <Input type="text" placeholder="Error" aria-invalid="true" />    </div>  )}

With label

import { Field, FieldLabel } from "@/components/field"
import { Input } from "@/components/input"

export function InputWithLabel() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="input-demo-email">Email</FieldLabel>
        <Input
          id="input-demo-email"
          type="email"
          placeholder="name@example.com"
        />
      </Field>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Input } from "@/components/input"export function InputWithLabel() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="input-demo-email">Email</FieldLabel>        <Input          id="input-demo-email"          type="email"          placeholder="name@example.com"        />      </Field>    </div>  )}

With description

import { Field, FieldDescription, FieldLabel } from "@/components/field"
import { Input } from "@/components/input"

export function InputWithDescription() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="input-demo-username">Username</FieldLabel>
        <Input
          id="input-demo-username"
          type="text"
          placeholder="Enter your username"
        />
        <FieldDescription>
          Choose a unique username for your account.
        </FieldDescription>
      </Field>
    </div>
  )
}

import { Field, FieldDescription, FieldLabel } from "@/components/field"import { Input } from "@/components/input"export function InputWithDescription() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="input-demo-username">Username</FieldLabel>        <Input          id="input-demo-username"          type="text"          placeholder="Enter your username"        />        <FieldDescription>          Choose a unique username for your account.        </FieldDescription>      </Field>    </div>  )}

Disabled

import { Field, FieldLabel } from "@/components/field"
import { Input } from "@/components/input"

export function InputDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>
        <Input
          id="input-demo-disabled"
          type="email"
          placeholder="Email"
          disabled
        />
      </Field>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Input } from "@/components/input"export function InputDisabled() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>        <Input          id="input-demo-disabled"          type="email"          placeholder="Email"          disabled        />      </Field>    </div>  )}

Input types

import { Field, FieldLabel } from "@/components/field"
import { Input } from "@/components/input"

export function InputTypes() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full flex-col gap-6">
        <Field>
          <FieldLabel htmlFor="input-demo-password">Password</FieldLabel>
          <Input
            id="input-demo-password"
            type="password"
            placeholder="Password"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-tel">Phone</FieldLabel>
          <Input
            id="input-demo-tel"
            type="tel"
            placeholder="+1 (555) 123-4567"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-url">URL</FieldLabel>
          <Input
            id="input-demo-url"
            type="url"
            placeholder="https://example.com"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-search">Search</FieldLabel>
          <Input id="input-demo-search" type="search" placeholder="Search" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-number">Number</FieldLabel>
          <Input id="input-demo-number" type="number" placeholder="123" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-date">Date</FieldLabel>
          <Input id="input-demo-date" type="date" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-time">Time</FieldLabel>
          <Input id="input-demo-time" type="time" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-demo-file">File</FieldLabel>
          <Input id="input-demo-file" type="file" />
        </Field>
      </div>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Input } from "@/components/input"export function InputTypes() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full flex-col gap-6">        <Field>          <FieldLabel htmlFor="input-demo-password">Password</FieldLabel>          <Input            id="input-demo-password"            type="password"            placeholder="Password"          />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-tel">Phone</FieldLabel>          <Input            id="input-demo-tel"            type="tel"            placeholder="+1 (555) 123-4567"          />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-url">URL</FieldLabel>          <Input            id="input-demo-url"            type="url"            placeholder="https://example.com"          />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-search">Search</FieldLabel>          <Input id="input-demo-search" type="search" placeholder="Search" />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-number">Number</FieldLabel>          <Input id="input-demo-number" type="number" placeholder="123" />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-date">Date</FieldLabel>          <Input id="input-demo-date" type="date" />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-time">Time</FieldLabel>          <Input id="input-demo-time" type="time" />        </Field>        <Field>          <FieldLabel htmlFor="input-demo-file">File</FieldLabel>          <Input id="input-demo-file" type="file" />        </Field>      </div>    </div>  )}

With select

import { Input } from "@/components/input"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function InputWithSelect() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full gap-2">
        <Input type="text" placeholder="Enter amount" className="flex-1" />
        <Select defaultValue="usd">
          <SelectTrigger className="w-32">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="usd">USD</SelectItem>
              <SelectItem value="eur">EUR</SelectItem>
              <SelectItem value="gbp">GBP</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}

import { Input } from "@/components/input"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function InputWithSelect() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full gap-2">        <Input type="text" placeholder="Enter amount" className="flex-1" />        <Select defaultValue="usd">          <SelectTrigger className="w-32">            <SelectValue />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="usd">USD</SelectItem>              <SelectItem value="eur">EUR</SelectItem>              <SelectItem value="gbp">GBP</SelectItem>            </SelectGroup>          </SelectContent>        </Select>      </div>    </div>  )}

With button

import { Button } from "@/components/button"
import { Input } from "@/components/input"

export function InputWithButton() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full gap-2">
        <Input type="search" placeholder="Search..." className="flex-1" />
        <Button>Search</Button>
      </div>
    </div>
  )
}

import { Button } from "@/components/button"import { Input } from "@/components/input"export function InputWithButton() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full gap-2">        <Input type="search" placeholder="Search..." className="flex-1" />        <Button>Search</Button>      </div>    </div>  )}

With native select

import { Input } from "@/components/input"
import { NativeSelect, NativeSelectOption } from "@/components/native-select"
import { Select } from "@/components/select"

export function InputWithNativeSelect() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full gap-2">
        <Input type="tel" placeholder="(555) 123-4567" className="flex-1" />
        <NativeSelect defaultValue="+1">
          <NativeSelectOption value="+1">+1</NativeSelectOption>
          <NativeSelectOption value="+44">+44</NativeSelectOption>
          <NativeSelectOption value="+46">+46</NativeSelectOption>
        </NativeSelect>
      </div>
    </div>
  )
}

import { Input } from "@/components/input"import { NativeSelect, NativeSelectOption } from "@/components/native-select"import { Select } from "@/components/select"export function InputWithNativeSelect() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full gap-2">        <Input type="tel" placeholder="(555) 123-4567" className="flex-1" />        <NativeSelect defaultValue="+1">          <NativeSelectOption value="+1">+1</NativeSelectOption>          <NativeSelectOption value="+44">+44</NativeSelectOption>          <NativeSelectOption value="+46">+46</NativeSelectOption>        </NativeSelect>      </div>    </div>  )}

Form

import { Button } from "@/components/button"
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/field"
import { Input } from "@/components/input"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function InputForm() {
  return (
    <div className="flex flex-col gap-6">
      <form className="w-full">
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="form-name">Name</FieldLabel>
            <Input id="form-name" type="text" placeholder="John Doe" />
          </Field>
          <Field>
            <FieldLabel htmlFor="form-email">Email</FieldLabel>
            <Input
              id="form-email"
              type="email"
              placeholder="john@example.com"
            />
            <FieldDescription>
              We&apos;ll never share your email with anyone.
            </FieldDescription>
          </Field>
          <div className="grid grid-cols-2 gap-4">
            <Field>
              <FieldLabel htmlFor="form-phone">Phone</FieldLabel>
              <Input
                id="form-phone"
                type="tel"
                placeholder="+1 (555) 123-4567"
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="form-country">Country</FieldLabel>
              <Select defaultValue="us">
                <SelectTrigger id="form-country">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="us">United States</SelectItem>
                    <SelectItem value="uk">United Kingdom</SelectItem>
                    <SelectItem value="ca">Canada</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </Field>
          </div>
          <Field>
            <FieldLabel htmlFor="form-address">Address</FieldLabel>
            <Input id="form-address" type="text" placeholder="123 Main St" />
          </Field>
          <Field orientation="horizontal">
            <Button type="button" variant="outline">
              Cancel
            </Button>
            <Button type="submit">Submit</Button>
          </Field>
        </FieldGroup>
      </form>
    </div>
  )
}

import { Button } from "@/components/button"import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/field"import { Input } from "@/components/input"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function InputForm() {  return (    <div className="flex flex-col gap-6">      <form className="w-full">        <FieldGroup>          <Field>            <FieldLabel htmlFor="form-name">Name</FieldLabel>            <Input id="form-name" type="text" placeholder="John Doe" />          </Field>          <Field>            <FieldLabel htmlFor="form-email">Email</FieldLabel>            <Input              id="form-email"              type="email"              placeholder="john@example.com"            />            <FieldDescription>              We&apos;ll never share your email with anyone.            </FieldDescription>          </Field>          <div className="grid grid-cols-2 gap-4">            <Field>              <FieldLabel htmlFor="form-phone">Phone</FieldLabel>              <Input                id="form-phone"                type="tel"                placeholder="+1 (555) 123-4567"              />            </Field>            <Field>              <FieldLabel htmlFor="form-country">Country</FieldLabel>              <Select defaultValue="us">                <SelectTrigger id="form-country">                  <SelectValue />                </SelectTrigger>                <SelectContent>                  <SelectGroup>                    <SelectItem value="us">United States</SelectItem>                    <SelectItem value="uk">United Kingdom</SelectItem>                    <SelectItem value="ca">Canada</SelectItem>                  </SelectGroup>                </SelectContent>              </Select>            </Field>          </div>          <Field>            <FieldLabel htmlFor="form-address">Address</FieldLabel>            <Input id="form-address" type="text" placeholder="123 Main St" />          </Field>          <Field orientation="horizontal">            <Button type="button" variant="outline">              Cancel            </Button>            <Button type="submit">Submit</Button>          </Field>        </FieldGroup>      </form>    </div>  )}

Adapted from the shadcn/ui Input (MIT).