入力

import {
  Field,
  FieldDescription,

Input は1行のテキスト（名前、メール、検索語など）を受け取ります。Base UI Input コンポーネント上に構築された、ネイティブ <input> の薄いラッパーで、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、コントラストの高いフォーカスアウトラインです。

次のような場面で使います：

• 認証とサインアップ — Field と FieldLabel と組み合わせたメール、ユーザー名、パスワード。
• 検索バー — Button と並べる、または InputGroup でアイコン付き。
• チェックアウトと設定 — FieldGroup に並べた住所、カード番号、プロフィール項目。

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json
コピー

import * as React from "react"

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

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

使い方#

コピーimport { Input } from "@/components/ui/input"

コピー<Input />

使用例#

基本#

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

export function InputBasic() {

Field#

Field、FieldLabel、FieldDescription を使って、ラベルと説明の付いた入力を作成します。

import {
  Field,
  FieldDescription,

Field Group#

FieldGroup を使って、複数の Field ブロックを表示し、フォームを構築します。

import { Button } from "@/components/ui/button"
import {
  Field,

無効#

disabled プロパティを使って、入力を無効にします。無効状態のスタイルを設定するには、Field コンポーネントに data-disabled 属性を追加します。

import {
  Field,
  FieldDescription,

エラー状態#

aria-invalid プロパティを使って、入力をエラーとしてマークします。エラー状態のスタイルを設定するには、Field コンポーネントに data-invalid 属性を追加します。

import {
  Field,
  FieldDescription,

ファイル#

type="file" プロパティを使って、ファイル入力を作成します。

import {
  Field,
  FieldDescription,

インライン#

Field に orientation="horizontal" を指定して、インラインの入力を作成します。Button と組み合わせると、ボタン付きの検索入力を作成できます。

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

グリッド#

グリッドレイアウトを使って、複数の入力を横に並べて配置します。

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

必須#

required 属性を使って、必須の入力を示します。

import {
  Field,
  FieldDescription,

Badge#

ラベル内で Badge を使って、推奨するフィールドを強調します。

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

Input Group#

入力の内側にアイコン、テキスト、ボタンを追加するには、InputGroup コンポーネントを使用します。ほかの例については、Input Group コンポーネントをご覧ください。

import { InfoIcon } from "lucide-react"

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

Button Group#

入力にボタンを追加するには、ButtonGroup コンポーネントを使用します。ほかの例については、Button Group コンポーネントをご覧ください。

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

フォーム#

複数の入力、セレクト、ボタンを備えた、完全なフォームの例です。

import { Button } from "@/components/ui/button"
import {
  Field,

RTL#

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

アクセシビリティ#

Input はネイティブの <input> を描画するため、キーボード編集、フォーカス、フォーム送信に ARIA の配線は不要です。残るのは実装側の責任です：

• すべての入力にラベルを付ける。 FieldLabel（または <label htmlFor>）と組み合わせてください。placeholder はラベルではありません。入力すると消え、読み上げも信頼できません。
• エラー文を関連付ける。 入力に aria-invalid を付け、aria-describedby で FieldError または FieldDescription の id を指し、スクリーンリーダーがフィールドと一緒にメッセージを読むようにします。
• 適切な type と autocomplete を選ぶ。 type="email" と autocomplete="email" で、正しいモバイルキーボードとオートフィルが得られます。