Helper

The Helper component is used to provide additional information or assistance related to a form element. It can display text, error messages, or suffix content to help users understand or interact with the form element.

Props

Name	Type	Description
children	`ReactElement`	The form element for which the helper content is provided.
text	`string` \| `ReactElement`	Additional text or content to display alongside the form element. It can be used to provide guidance or context.
error	`string` \| `ReactElement`	An error message to display if there is an issue with the form element. It helps users understand and address errors.
suffix	`string` \| `ReactElement`	Additional content to be appended to the form element. It can be used for adding icons or extra information.

Try It

Open Sandbox

import { Helper, Input } from '@kloktun/uikit'

export default function HelperExample() {
  return (
    <div className="flex flex-col gap-4">
      <Helper text="Please enter your username">
        <Input placeholder="Username" />
      </Helper>
      <Helper error="Username is required">
        <Input placeholder="Username" />
      </Helper>
      <Helper text="Enter your email" suffix="0/30">
        <Input placeholder="Email" />
      </Helper>
    </div>
  );
}

Label Spinner