Field

import { Field, FieldDescription, FieldLabel } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function BasicDemo() {
  return (
    <Field name="displayName">
      <FieldLabel size="lg" inset={false} required>
        Display name
      </FieldLabel>
      <Input size="lg" placeholder="Ada Lovelace" required />
      <FieldDescription size="lg">Shown anywhere your profile is visible.</FieldDescription>
    </Field>
  );
}

import {
  Field,
  FieldDescription,
  FieldLabel,
  type FieldSize,
} from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

const SIZES: FieldSize[] = ["lg", "xl", "2xl"];

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      {SIZES.map((size) => (
        <Field key={size} name={`displayName-${size}`}>
          <FieldLabel size={size} inset={false} required>
            Display name ({size})
          </FieldLabel>
          <Input size={size} placeholder="Ada Lovelace" required />
          <FieldDescription size={size}>Shown anywhere your profile is visible.</FieldDescription>
        </Field>
      ))}
    </div>
  );
}

import { Field, FieldError, FieldLabel } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function InvalidDemo() {
  return (
    <Field name="workspaceSlug" invalid>
      <FieldLabel size="lg" inset={false}>
        Workspace slug
      </FieldLabel>
      <Input size="lg" defaultValue="Already taken" />
      <FieldError size="lg" match={true}>
        Choose a different workspace slug.
      </FieldError>
    </Field>
  );
}

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function RequiredValidationDemo() {
  return (
    <Field name="fullName" validationMode="onBlur">
      <FieldLabel size="lg" inset={false} required>
        Full name
      </FieldLabel>
      <Input size="lg" placeholder="Ada Lovelace" required />
      <FieldError size="lg" match="valueMissing">
        Enter your full name.
      </FieldError>
      <FieldDescription size="lg">Visible on your profile.</FieldDescription>
    </Field>
  );
}

import { Field, FieldLabelGroup } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function HorizontalDemo() {
  return (
    <Field name="workspaceName">
      <div className="flex items-start gap-4">
        <FieldLabelGroup
          size="lg"
          orientation="horizontal"
          required
          label="Workspace name"
          description="Shown across your projects."
        />
        <Input size="lg" placeholder="Acme Inc." />
      </div>
    </Field>
  );
}

import { Field, FieldHelperText, FieldLabel } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function HelperTextDemo() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      <Field name="slug">
        <FieldLabel size="lg" inset={false}>
          Slug
        </FieldLabel>
        <Input size="lg" placeholder="acme-inc" />
        <FieldHelperText size="lg" hint="Lowercase letters, numbers, and dashes." />
      </Field>
      <Field name="slugTaken">
        <FieldLabel size="lg" inset={false}>
          Slug
        </FieldLabel>
        <Input size="lg" defaultValue="acme inc" />
        <FieldHelperText
          size="lg"
          hint="Lowercase letters, numbers, and dashes."
          error="Only lowercase letters, numbers, and dashes are allowed."
        />
      </Field>
    </div>
  );
}