Input

import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function BasicDemo() {
  return (
    <InputGroup size="lg">
      <Input size="lg" aria-label="Name" placeholder="Ada Lovelace" />
    </InputGroup>
  );
}

import { Input, InputGroup, type InputSize } from "@makeplane/propel/components/input";

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

export default function SizesDemo() {
  return (
    <div className="flex w-72 flex-col gap-3">
      {SIZES.map((size) => (
        <InputGroup key={size} size={size}>
          {/* These inputs have no visible label, so `aria-label` is the whole accessible name —
              it has to say what the field is for, not just which rung it is on. */}
          <Input size={size} aria-label={`Email (${size})`} placeholder={size} />
        </InputGroup>
      ))}
    </div>
  );
}

import { Icon } from "@makeplane/propel/components/icon";
import { Input, InputGroup } from "@makeplane/propel/components/input";
import { MailOutline, SearchOutline } from "@makeplane/propel/icons";

export default function WithIconsDemo() {
  return (
    <InputGroup size="lg">
      <Icon icon={SearchOutline} tint="secondary" size="md" />
      <Input size="lg" aria-label="Search" placeholder="Search people" />
      <Icon icon={MailOutline} tint="secondary" size="md" />
    </InputGroup>
  );
}

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

export default function InAFieldDemo() {
  return (
    <Field name="email" invalid>
      <FieldLabel size="lg" inset={false}>
        Work email
      </FieldLabel>
      <InputGroup size="lg">
        <Input size="lg" defaultValue="not-an-email" />
      </InputGroup>
      <FieldError size="lg" match={true}>
        Enter a valid email address.
      </FieldError>
    </Field>
  );
}

import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function DisabledDemo() {
  return (
    <InputGroup size="lg">
      <Input size="lg" aria-label="Name" placeholder="Ada Lovelace" disabled />
    </InputGroup>
  );
}