Form Field

"use client";

import React from "react";
import {
  FormField,
  FormFieldProps,
} from "@brynlabs/fusion-ui";

export type FormFieldExampleProps = {
  disabled?: boolean;
} & Omit<FormFieldProps, "children">;

export const FormFieldExample: React.FC<FormFieldExampleProps> = ({
  disabled = false,
  ...formFieldProps
}) => {
  const [value, setValue] = React.useState("");
  return (
    <FormField
      {...formFieldProps}
      label={"Formular Label"}
      required={true}
      disabled={disabled}
      hint={"This is a hint."}
      errorMessage={"This is an error message."}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "1rem",
          background: "green",
          padding: "2rem",
        }}>
        <span>Custom FormField content</span>
        <input
          style={{border: "1px solid"}}
          value={value}
          onChange={e => {
            setValue(e.target.value);
          }}></input>
      </div>
    </FormField>
  );
};