The Input

Buttons

About

Here is The Input component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds The Input to your project and fits it to your theme.

Code

How The Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx


  'use client'

  import { useState } from 'react'
  import { ArrowRightIcon } from 'lucide-react'

  import { Button } from '@/components/ui/button'
  import { ButtonGroup } from '@/components/ui/button-group'
  import { Input } from '@/components/ui/input'
  import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
  } from '@/components/ui/select'

  const currencies = [
    { value: '$', label: 'US Dollar' },
    { value: '€', label: 'Euro' },
    { value: '£', label: 'British Pound' },
  ] as const

  export default function Input15() {
    const [currency, setCurrency] = useState<string>(currencies[0].value)

    return (
      <ButtonGroup className="mx-auto flex max-w-sm">
        <Select value={currency} onValueChange={setCurrency}>
          <SelectTrigger className="h-9 w-16 shrink-0 px-2">
            <SelectValue>{currency}</SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {currencies.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  {item.value}{' '}
                  <span className="text-muted-foreground">{item.label}</span>
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>

        <Input
          placeholder="10.00"
          inputMode="decimal"
          className="h-9 flex-1"
        />

        <Button
          variant="outline"
          size="icon"
          aria-label="Submit amount"
          className="h-9 w-9 shrink-0"
        >
          <ArrowRightIcon className="size-4" />
        </Button>
      </ButtonGroup>
    )
  }