Input

Open in GitHub

Open in Figma

A field for collecting user input.

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
---
4

5
<Input type="text" placeholder="Enter your name" />

Installation

bunx bejamas add input

npx bejamas add input

pnpm dlx bejamas add input

yarn dlx bejamas add input

Usage

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
---
4
<Input type="email" placeholder="Enter your email" />

Examples

Default

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
---
4

5
<Input type="email" placeholder="Enter your email" />

Disabled

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
---
4

5
<Input type="email" placeholder="Enter your email" disabled />

File

Picture

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
import { Label } from '@bejamas/ui/components/label';
4
---
5

6
<div class="grid w-full max-w-sm items-center gap-3">
7
  <Label htmlFor="picture">Picture</Label>
8
  <Input id="picture" type="file" />
9
</div>

With Label

1
---
2
import { Input } from '@bejamas/ui/components/input';
3
import { Label } from '@bejamas/ui/components/label';
4
---
5

6
<div class="grid w-full max-w-sm items-center gap-3">
7
  <Label htmlFor="email">Email</Label>
8
  <Input id="email" type="email" placeholder="Enter your email" />
9
</div>

With Button

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Input } from '@bejamas/ui/components/input';
4
---
5

6
<div class="flex w-full max-w-sm items-center gap-2">
7
   <Input type="email" placeholder="Email" />
8
   <Button type="submit" variant="outline">
9
     Subscribe
10
   </Button>
11
 </div>