Reddot UI Library

Docs
Input

Input

Displays a form input field or a component that looks like an input field.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/input.json

Utilisation

import { Input } from "@/components/ui/input"
 
export function InputDemo() {
  return <Input type="email" placeholder="Email" />
}

Avec label

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
export function InputWithLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

Avec bouton

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
 
export function InputWithButton() {
  return (
    <div className="flex w-full max-w-sm items-center space-x-2">
      <Input type="email" placeholder="Email" />
      <Button type="submit">Subscribe</Button>
    </div>
  )
}

Désactivé

import { Input } from "@/components/ui/input"
 
export function InputDisabled() {
  return <Input disabled type="email" placeholder="Email" />
}

Fichier

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
export function InputFile() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}

API Reference

Input

Extend les propriétés standard de l'élément HTML <input>.

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Supporte tous les types d'input HTML standards
  • Fonctionne parfaitement avec les librairies de formulaire