Input

Kolom teks setinggi 40 dengan radius 10 dan cincin fokus brand. Sebuah <input> biasa — tanpa props tambahan.

Instalasi

npx shadcn@latest add @glc/input

Pasang tema

Setiap komponen bergantung pada glc-theme. Lewati langkah ini kalau sudah pernah dijalankan.

npx shadcn@latest add @glc/glc-theme

Salin ke components/ui/input.tsx

import * as React from "react"

import { cn } from "@/registry/glc/lib/utils"

/**
 * Text field — the `Input` set from Company BookV1.0.fig.
 * Height 40, radius 10, padding 4/10, Inter 14/20, brand focus ring.
 * shadcn-compatible: a plain `<input>` with the same `data-slot` and
 * `aria-invalid` styling contract.
 */
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-lg border border-input bg-card px-2.5 py-1",
        "text-sm leading-5 text-foreground shadow-none transition-[color,box-shadow] outline-none",
        "placeholder:text-[var(--text-placeholder)] selection:bg-primary selection:text-primary-foreground",
        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
        "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
        "disabled:cursor-not-allowed disabled:bg-[var(--surface-disabled)] disabled:text-[var(--text-disabled)]",
        className
      )}
      {...props}
    />
  )
}

export { Input }

Sesuaikan path import

Berkas di atas meng-import @/registry/glc/lib/utils. Ubah menjadi lokasi cn di proyekmu — biasanya @/lib/utils. CLI melakukan ini otomatis.

Penggunaan

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

<Input placeholder="PT Contoh Sejahtera" />

import { Input } from "@/registry/glc/ui/input"

export function InputDemo() {
  return (
    <Input
      className="max-w-sm"
      placeholder="PT Contoh Sejahtera"
      aria-label="Nama perusahaan"
    />
  )
}

Dengan label

Hubungkan htmlFor ke id. Tanpa itu, mengklik label tidak memfokuskan kolomnya dan pembaca layar kehilangan namanya.

NPWP

import { Input } from "@/registry/glc/ui/input"
import { Label } from "@/registry/glc/ui/label"

export function InputWithLabel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="npwp">NPWP</Label>
      <Input id="npwp" placeholder="00.000.000.0-000.000" />
    </div>
  )
}

Status

Kondisi galat digerakkan oleh aria-invalid, bukan prop error.

Email penagihan

Format email tidak valid.

Kode cabang

import { Input } from "@/registry/glc/ui/input"
import { Label } from "@/registry/glc/ui/label"

export function InputStates() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="input-invalid">Email penagihan</Label>
        {/* `aria-invalid` drives the styling — no `error` prop to keep in sync,
          * and screen readers get the state for free. */}
        <Input
          id="input-invalid"
          aria-invalid
          aria-describedby="input-invalid-msg"
          defaultValue="bukan-email"
        />
        <p id="input-invalid-msg" className="text-sm leading-5 text-[var(--text-error)]">
          Format email tidak valid.
        </p>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="input-disabled">Kode cabang</Label>
        <Input id="input-disabled" disabled defaultValue="JKT-01" />
      </div>
    </div>
  )
}

Kenapa aria-invalid, bukan prop error

Satu atribut mengurus dua hal sekaligus: gayanya dan pengumuman ke pembaca layar. Prop error terpisah akan membuat keduanya bisa jadi tidak sinkron — komponen terlihat merah tapi tidak diumumkan sebagai galat, atau sebaliknya.

Pasangkan dengan aria-describedby yang menunjuk ke pesan galatnya, seperti pada contoh di atas.

Props

Input tidak menambahkan props apa pun. Seluruh atribut <input> diteruskan; yang di bawah ini hanya yang paling memengaruhi tampilan.

Prop	Tipe	Default	Keterangan
`type`	`string`	`"text"`	Tipe input HTML. Gaya file: sudah disiapkan untuk type="file".
`aria-invalid`	`boolean`	—	Menyalakan border dan cincin fokus merah.
`disabled`	`boolean`	`false`	Latar dan teks berubah ke token disabled.
`className`	`string`	—	Digabung terakhir lewat cn(), jadi bisa menimpa kelas bawaan.

Kode sumber

import * as React from "react"

import { cn } from "@/registry/glc/lib/utils"

/**
 * Text field — the `Input` set from Company BookV1.0.fig.
 * Height 40, radius 10, padding 4/10, Inter 14/20, brand focus ring.
 * shadcn-compatible: a plain `<input>` with the same `data-slot` and
 * `aria-invalid` styling contract.
 */
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-lg border border-input bg-card px-2.5 py-1",
        "text-sm leading-5 text-foreground shadow-none transition-[color,box-shadow] outline-none",
        "placeholder:text-[var(--text-placeholder)] selection:bg-primary selection:text-primary-foreground",
        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
        "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
        "disabled:cursor-not-allowed disabled:bg-[var(--surface-disabled)] disabled:text-[var(--text-disabled)]",
        className
      )}
      {...props}
    />
  )
}

export { Input }