Input 输入框

Preview

邮箱

Code

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

export function InputDemo() {
  return (
    <Field>
      <FieldLabel htmlFor="input-demo-api-key">API Key</FieldLabel>
      <Input id="input-demo-api-key" type="password" placeholder="sk-..." />
      <FieldDescription>
        Your API key is encrypted and stored securely.
      </FieldDescription>
    </Field>
  )
}

Scopify 说明

本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。

Installation

npx shadcn@latest add input

Usage

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

<Input />

Basic

Preview

邮箱

Code

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

export function InputBasic() {
  return <Input placeholder="Enter text" />
}

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Preview

邮箱

Code

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

export function InputField() {
  return (
    <Field>
      <FieldLabel htmlFor="input-field-username">Username</FieldLabel>
      <Input
        id="input-field-username"
        type="text"
        placeholder="Enter your username"
      />
      <FieldDescription>
        Choose a unique username for your account.
      </FieldDescription>
    </Field>
  )
}

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

Preview

邮箱

Code

import { Button } from "@scopify/ui/shadcn/components/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@scopify/ui/shadcn/components/field"
import { Input } from "@scopify/ui/shadcn/components/input"

export function InputFieldgroup() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="fieldgroup-name">Name</FieldLabel>
        <Input id="fieldgroup-name" placeholder="Jordan Lee" />
      </Field>
      <Field>
        <FieldLabel htmlFor="fieldgroup-email">Email</FieldLabel>
        <Input
          id="fieldgroup-email"
          type="email"
          placeholder="name@example.com"
        />
        <FieldDescription>
          We&apos;ll send updates to this address.
        </FieldDescription>
      </Field>
      <Field orientation="horizontal">
        <Button type="reset" variant="outline">
          Reset
        </Button>
        <Button type="submit">Submit</Button>
      </Field>
    </FieldGroup>
  )
}

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

Preview

邮箱

Code

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

export function InputDisabled() {
  return (
    <Field data-disabled>
      <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>
      <Input
        id="input-demo-disabled"
        type="email"
        placeholder="Email"
        disabled
      />
      <FieldDescription>This field is currently disabled.</FieldDescription>
    </Field>
  )
}

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Preview

邮箱

Code

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

export function InputInvalid() {
  return (
    <Field data-invalid>
      <FieldLabel htmlFor="input-invalid">Invalid Input</FieldLabel>
      <Input id="input-invalid" placeholder="Error" aria-invalid />
      <FieldDescription>
        This field contains validation errors.
      </FieldDescription>
    </Field>
  )
}

File

Use the type="file" prop to create a file input.

Preview

邮箱

Code

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

export function InputFile() {
  return (
    <Field>
      <FieldLabel htmlFor="picture">Picture</FieldLabel>
      <Input id="picture" type="file" />
      <FieldDescription>Select a picture to upload.</FieldDescription>
    </Field>
  )
}

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Preview

邮箱

Code

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

export function InputInline() {
  return (
    <Field orientation="horizontal">
      <Input type="search" placeholder="Search..." />
      <Button>Search</Button>
    </Field>
  )
}

Grid

Use a grid layout to place multiple inputs side by side.

Preview

邮箱

Code

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

export function InputGrid() {
  return (
    <FieldGroup className="grid max-w-sm grid-cols-2">
      <Field>
        <FieldLabel htmlFor="first-name">First Name</FieldLabel>
        <Input id="first-name" placeholder="Jordan" />
      </Field>
      <Field>
        <FieldLabel htmlFor="last-name">Last Name</FieldLabel>
        <Input id="last-name" placeholder="Lee" />
      </Field>
    </FieldGroup>
  )
}

Required

Use the required attribute to indicate required inputs.

Preview

邮箱

Code

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

export function InputRequired() {
  return (
    <Field>
      <FieldLabel htmlFor="input-required">
        Required Field <span className="text-destructive">*</span>
      </FieldLabel>
      <Input
        id="input-required"
        placeholder="This field is required"
        required
      />
      <FieldDescription>This field must be filled out.</FieldDescription>
    </Field>
  )
}

Badge

Use Badge in the label to highlight a recommended field.

Preview

邮箱

Code

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

export function InputBadge() {
  return (
    <Field>
      <FieldLabel htmlFor="input-badge">
        Webhook URL{" "}
        <Badge variant="secondary" className="ml-auto">
          Beta
        </Badge>
      </FieldLabel>
      <Input
        id="input-badge"
        type="url"
        placeholder="https://api.example.com/webhook"
      />
    </Field>
  )
}

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

Preview

邮箱

Code

import { InfoIcon } from "lucide-react"

import { Field, FieldLabel } from "@scopify/ui/shadcn/components/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@scopify/ui/shadcn/components/input-group"

export function InputInputGroup() {
  return (
    <Field>
      <FieldLabel htmlFor="input-group-url">Website URL</FieldLabel>
      <InputGroup>
        <InputGroupInput id="input-group-url" placeholder="example.com" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InfoIcon />
        </InputGroupAddon>
      </InputGroup>
    </Field>
  )
}

Button Group

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

Preview

邮箱

Code

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

export function InputButtonGroup() {
  return (
    <Field>
      <FieldLabel htmlFor="input-button-group">Search</FieldLabel>
      <ButtonGroup>
        <Input id="input-button-group" placeholder="Type to search..." />
        <Button variant="outline">Search</Button>
      </ButtonGroup>
    </Field>
  )
}

Form

A full form example with multiple inputs, a select, and a button.

Preview

邮箱

Code

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

export function InputForm() {
  return (
    <form className="w-full max-w-sm">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="form-name">Name</FieldLabel>
          <Input
            id="form-name"
            type="text"
            placeholder="Evil Rabbit"
            required
          />
        </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>
                <SelectItem value="us">United States</SelectItem>
                <SelectItem value="uk">United Kingdom</SelectItem>
                <SelectItem value="ca">Canada</SelectItem>
              </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>
  )
}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

Preview

邮箱

Code

"use client"

import * as React from "react"

import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/styles/radix-nova/ui-rtl/field"
import { Input } from "@/styles/radix-nova/ui-rtl/input"

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      apiKey: "API Key",
      placeholder: "sk-...",
      description: "Your API key is encrypted and stored securely.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      apiKey: "مفتاح API",
      placeholder: "sk-...",
      description: "مفتاح API الخاص بك مشفر ومخزن بأمان.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      apiKey: "מפתח API",
      placeholder: "sk-...",
      description: "מפתח ה-API שלך מוצפן ונשמר בצורה מאובטחת.",
    },
  },
}

export function InputRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <Field dir={dir}>
      <FieldLabel htmlFor="input-rtl-api-key">{t.apiKey}</FieldLabel>
      <Input
        id="input-rtl-api-key"
        type="password"
        placeholder={t.placeholder}
        dir={dir}
      />
      <FieldDescription>{t.description}</FieldDescription>
    </Field>
  )
}

InstallationCopy Anchor Link

UsageCopy Anchor Link

BasicCopy Anchor Link

FieldCopy Anchor Link

Field GroupCopy Anchor Link

DisabledCopy Anchor Link

InvalidCopy Anchor Link

FileCopy Anchor Link

InlineCopy Anchor Link

GridCopy Anchor Link

RequiredCopy Anchor Link

BadgeCopy Anchor Link

Input GroupCopy Anchor Link

Button GroupCopy Anchor Link

FormCopy Anchor Link

RTLCopy Anchor Link

本页内容

Installation

Usage

Basic

Field

Field Group

Disabled

Invalid

File

Inline

Grid

Required

Badge

Input Group

Button Group

Form

RTL