Input Group

Documentation for the <InputGroup /> component. Learn about the available props and how to use it.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn

yarn add @exponentialeducation/betomic

Basic Example#

InputGroup are a basic building block used to render text inputs across many components. They allow you to add icons and buttons within a text input to expand its appearance and functionality. For example, you might use an input group to build a visibility toggle for a password field.

{/* ... */}

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <InputGroup placeholder="Basic example" />

      {/* ... */}
    </main>
  )
}

Left decoration#

{/* ... */}

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <InputGroup
        placeholder="Left decoration"
        leftElement={<EyeIcon className="w-4" />}
      />

      {/* ... */}
    </main>
  )
}

Right decoration#

{/* ... */}

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <InputGroup
        placeholder="Right decoration"
        leftElement={<EyeIcon className="w-4" />}
      />

      {/* ... */}
    </main>
  )
}

Both decorations#

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <div className="w-full mt-5">
      {/* ... */}

      <InputGroup
        className="pl-18 pr-20"
        leftElement={
          <span className=" text-surface-300 select-none">https://</span>
        }
        rightElement={
          <span className="text-surface-300 select-none">.bedu.org</span>
        }
      />

      {/* ... */}
    </div>
  );
}

With validations#

{/* ... */}

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <InputGroup
        isValid={false}
        placeholder="Valid false example"
        rightElement={<EyeIcon className="w-4" />}
      />
      <InputGroup
        isValid
        placeholder="Valid example"
        rightElement={<CheckIcon className="w-4" />}
      />

      {/* ... */}
    </main>
  )
}

Other#

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <div className="w-full mt-5">
      {/* ... */}

      <InputGroup
        type="search"
        placeholder="Search example..."
        leftElement={
          <SearchIcon className="w-4" />
        }
      />

      {/* ... */}
    </div>
  );
}

Dark mode#

By enabling dark mode in an app that implements an <InputGroup /> or by using the TailwindCSS dark class directly on its container as well in the right/left elements, the component styles accordingly.

import { InputGroup } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <div className="w-full mt-5 dark">
      {/* ... */}

      <InputGroup
        type="search"
        className="h-12"
        placeholder="Search example..."
        leftElement={
          <SearchIcon className="w-4" />
        }
      />

      {/* ... */}
    </div>
  );
}

Props#

Extends HTMLInputElementprops