Input

Preview

Installation

You can install the component via the CLI or import it directly from the component package.

When initializing the project with beej it is already initialized

pnpm add @thanka-digital/beej-component

Usage

import { Input } from "@thanka-digital/beej-component";

export default function Example() {
  return (
    <Input colorscheme="primary" id="username" label="Username" padding="base" required variant="default"/>
  );
}

Props Reference

Alongside all the in-built input component props we have some extra props that can be used to style the input component.

Interactive Playground

Test different combinations props to see how <Input /> behaves in your project:

<Input
 colorscheme="primary"
 padding="base"
 id="demo-input"
 label="Email Address"
 placeholder="your@example.com"
 variant="default"
 required 
/>