Input

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

export function InputDemo() {
  return <Input placeholder="Search apps" className="max-w-xs" />
}

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

export function InputWithLabelAndHint() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="store-url">Store URL</Label>
      <Input
        id="store-url"
        placeholder="your-store.myshopify.com"
        aria-describedby="store-url-hint"
      />
      <p
        id="store-url-hint"
        className="text-[13px] leading-4 text-muted-foreground"
      >
        The address you sign in to Shopify with.
      </p>
    </div>
  )
}

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

export function InputInvalid() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="store-url-invalid">Store URL</Label>
      <Input
        id="store-url-invalid"
        defaultValue="mystore.com"
        aria-invalid
        aria-describedby="store-url-error"
      />
      <p
        id="store-url-error"
        className="text-[13px] leading-4 text-destructive"
      >
        Enter a URL ending in .myshopify.com
      </p>
    </div>
  )
}

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

export function InputDisabled() {
  return <Input disabled placeholder="Disabled" className="max-w-xs" />
}

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

export function InputFile() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="logo">Logo</Label>
      <Input id="logo" type="file" />
    </div>
  )
}

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

export function InputWithButton() {
  return (
    <form className="flex w-full max-w-sm items-center gap-2">
      <Input type="email" placeholder="Email" aria-label="Email" />
      <Button type="submit" variant="secondary">
        Subscribe
      </Button>
    </form>
  )
}