Input

A field for collecting user input.

1
---
2
import { Input } from '@bejamas/registry/ui/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/registry/ui/input';
3
---
4
<Input type="email" placeholder="Enter your email" />

Props

Prop	Type	Default
`size`	`InputUiSize \| NativeInputSize`
`nativeSize`	`NativeInputSize`

Examples

Default

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

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

Disabled

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

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

Invalid

Set aria-invalid="true" to show the error state. Wrap the input in a Field with a FieldError to describe the problem.

1
---
2
import { Field, FieldError, FieldLabel } from '@bejamas/registry/ui/field';
3
import { Input } from '@bejamas/registry/ui/input';
4
---
5

6
<Field data-invalid="true" class="w-full max-w-sm">
7
  <FieldLabel for="email-invalid">Email</FieldLabel>
8
  <Input
9
    id="email-invalid"
10
    type="email"
11
    value="hello@"
12
    aria-invalid="true"
13
    aria-describedby="email-invalid-error"
14
  />
15
  <FieldError id="email-invalid-error">Enter a valid email address.</FieldError>
16
</Field>

Sizes

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

6
<div class="grid w-full max-w-sm gap-3">
7
  <div class="flex items-center gap-2">
8
    <Input size="sm" placeholder="Small input (h-8)" />
9
    <Button size="sm" variant="outline">
10
      Small
11
    </Button>
12
  </div>
13
  <div class="flex items-center gap-2">
14
    <Input placeholder="Default input (h-9)" />
15
    <Button variant="outline">Default</Button>
16
  </div>
17
  <div class="flex items-center gap-2">
18
    <Input size="lg" placeholder="Large input (h-10)" />
19
    <Button size="lg" variant="outline">
20
      Large
21
    </Button>
22
  </div>
23
</div>

File

Picture

1
---
2
import { Input } from '@bejamas/registry/ui/input';
3
import { Label } from '@bejamas/registry/ui/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/registry/ui/input';
3
import { Label } from '@bejamas/registry/ui/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/registry/ui/button';
3
import { Input } from '@bejamas/registry/ui/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>