Form Group

Documentation for the <FormGroup /> 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#

FormGroup are built using the FormGroup.Message component.

{/* ... */}

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

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

      <FormGroup
        label="Label"
        labelFor="test-input">
        <InputGroup id="test-input" placeholder="Basic example" />
      </FormGroup>

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

Required decoration#

{/* ... */}

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

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

      <FormGroup
        label="Label"
        required
        labelFor="test-input-required">
        <InputGroup id="test-input-required" placeholder="Basic example" />
      </FormGroup>

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

Right element decoration#

{/* ... */}

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

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

      <FormGroup
        label="Label"
        required
        labelFor="test-input"
        rightElement={
          <HelperIcon className="w-4" />
        }>
        <InputGroup id="test-input" placeholder="Basic example" />
      </FormGroup>

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

Helper text#

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

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

      <FormGroup
        label="Label"
        required
        helperText="This is a helper text example"
        labelFor="test-input-helper-text"
        rightElement={
          <HelperIcon className="w-4" />
        }
        >
        <InputGroup disabled id="test-input-helper-text" placeholder="Basic example" />
      </FormGroup>

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

Form group message#

{/* ... */}

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

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

      <FormGroup
        label="Label"
        required
        labelFor="test-input-group-message"
        rightElement={
          <HelperIcon className="w-4" />
        }
        >
        <InputGroup isValid={false} id="test-input-group-message" placeholder="Basic example" />
        <FormGroup.Message type="error">Este campo es requerido</FormGroup.Message>
      </FormGroup>

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

Disabled#

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

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

      <FormGroup
        disabled
        label="Label"
        required
        labelFor="test-input-group-disabled"
        rightElement={
          <HelperIcon className="w-4" />
        }
        >
        <InputGroup id="test-input-group-disabled" placeholder="Basic example" />
      </FormGroup>

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

Props#

FormGroup#

Main component

FormGroup.Message#