Field

import { Field, FieldLabel, Input } from "@smallest-inc/ui";

export default function FieldDefault() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Agent name</FieldLabel>
      <Input placeholder="Support agent" />
    </Field>
  );
}

import { Field, FieldDescription, FieldLabel, Input } from "@smallest-inc/ui";

export default function FieldWithDescription() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Transfer number</FieldLabel>
      <Input type="tel" placeholder="+1 415 555 0132" />
      <FieldDescription>The agent forwards calls here when a caller asks for a person.</FieldDescription>
    </Field>
  );
}

import { Field, FieldLabel, Input } from "@smallest-inc/ui";

export default function FieldOptional() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>
        Voicemail greeting <span className="font-normal text-fg-secondary">Optional</span>
      </FieldLabel>
      <Input placeholder="Sorry we missed you" />
    </Field>
  );
}

import { useState } from "react";
import { Field, FieldError, FieldLabel, Input } from "@smallest-inc/ui";

const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function isInvalid(value: string) {
  const next = value.trim();
  return next !== "" && !EMAIL.test(next);
}

export default function FieldErrorExample() {
  const [invalid, setInvalid] = useState(true);

  return (
    <Field className="w-full max-w-xs" invalid={invalid} touched={invalid}>
      <FieldLabel>Notification email</FieldLabel>
      <Input
        defaultValue="ops@smallest"
        placeholder="you@example.com"
        onChange={(event) => {
          if (invalid && !isInvalid(event.currentTarget.value)) setInvalid(false);
        }}
        onBlur={(event) => setInvalid(isInvalid(event.currentTarget.value))}
      />
      <FieldError match={invalid}>Enter a valid email address.</FieldError>
    </Field>
  );
}