Input

スタイル機能とアクセシビリティ機能が組み込まれたフォームおよびユーザーデータ入力用のテキスト入力コンポーネント。

import {
  Field,
  FieldDescription,

インストール


pnpm dlx shadcn@latest add input

使い方

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

<Input />

基本

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

export function InputBasic() {

フィールド

Field、FieldLabel、および FieldDescription を使用して、ラベルと説明を追加します。

import {
  Field,
  FieldDescription,

フィールドグループ

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

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

無効

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

import {
  Field,
  FieldDescription,

無効な入力

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

import {
  Field,
  FieldDescription,

ファイル

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

import {
  Field,
  FieldDescription,

インライン

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

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

グリッド

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

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

必須

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

import {
  Field,
  FieldDescription,

バッジ

推奨フィールドを強調表示するには、ラベルで Badge を使用します。

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

入力グループ

入力内にアイコン、テキスト、またはボタンを追加するには、InputGroup コンポーネントを使用します。その他の例については、入力グループコンポーネントを参照してください。

import { InfoIcon } from "lucide-react"

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

ボタングループ

入力にボタンを追加するには、ButtonGroup コンポーネントを使用します。その他の例については、ボタングループコンポーネントを参照してください。

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

フォーム

複数の入力、選択、ボタンを含む完全なフォームの例。

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

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

Hover Card Input Group

On This Page

インストール使い方基本フィールドフィールドグループ無効無効な入力ファイルインライングリッド必須バッジ入力グループボタングループフォーム RTL

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。