Input

import { useState } from "react";
import { Input } from "density-base-ui";

export default function InputExample() {
  const [projectName, setProjectName] = useState("");

  return (
    <Input
      value={projectName}
      onChange={(event) => {
        setProjectName(event.target.value);
      }}
      placeholder="Roadmap planning"
    />
  );
}

import { useState } from "react";
import { Input, Separator, View } from "density-base-ui";

export default function InputFieldExample() {
  const [verticalValue, setVerticalValue] = useState("");
  const [horizontalValue, setHorizontalValue] = useState("");

  return (
    <View>
      <Input
        value={verticalValue}
        onChange={(event) => {
          setVerticalValue(event.target.value);
        }}
        fieldOrientation="vertical"
        hint="Shown below the control."
        label="Vertical field"
      />
      <Separator />
      <Input
        value={horizontalValue}
        onChange={(event) => {
          setHorizontalValue(event.target.value);
        }}
        fieldOrientation="horizontal"
        hint="Shown beside the control."
        label="Horizontal field"
      />
    </View>
  );
}

import { useState } from "react";
import { Input } from "density-base-ui";

export default function InputErrorExample() {
  const [projectCode, setProjectCode] = useState("");

  return (
    <Input
      value={projectCode}
      onChange={(event) => {
        setProjectCode(event.target.value);
      }}
      errorMessage="Enter a valid project code."
      hint="Use the short code people already recognize."
      label="Project code"
    />
  );
}

import { useState } from "react";
import { Input, View } from "density-base-ui";

export default function InputEmphasisExample() {
  const [inputValues, setInputValues] = useState<Record<string, string>>({});
  const updateInputValue = (emphasis: string, value: string) => {
    setInputValues((currentValues) => ({
      ...currentValues,
      [emphasis]: value,
    }));
  };

  return (
    <View>
      <Input
        value={inputValues.primary ?? ""}
        onChange={(event) => updateInputValue("primary", event.target.value)}
        emphasis="primary"
        placeholder="Primary input"
      />
      <Input
        value={inputValues.secondary ?? ""}
        onChange={(event) => updateInputValue("secondary", event.target.value)}
        emphasis="secondary"
        placeholder="Secondary input"
      />
      <Input
        value={inputValues.outline ?? ""}
        onChange={(event) => updateInputValue("outline", event.target.value)}
        emphasis="outline"
        placeholder="Outline input"
      />
      <Input
        value={inputValues.ghostPrimary ?? ""}
        onChange={(event) =>
          updateInputValue("ghostPrimary", event.target.value)
        }
        emphasis="ghost-primary"
        placeholder="Ghost primary input"
      />
      <Input
        value={inputValues.ghostSecondary ?? ""}
        onChange={(event) =>
          updateInputValue("ghostSecondary", event.target.value)
        }
        emphasis="ghost-secondary"
        placeholder="Ghost secondary input"
      />
      <Input
        value={inputValues.ghostTertiary ?? ""}
        onChange={(event) =>
          updateInputValue("ghostTertiary", event.target.value)
        }
        emphasis="ghost-tertiary"
        placeholder="Ghost tertiary input"
      />
    </View>
  );
}

import { useState } from "react";
import { Input, View } from "density-base-ui";

export default function InputSizeExample() {
  const [inputValues, setInputValues] = useState<Record<string, string>>({});
  const updateInputValue = (size: string, value: string) => {
    setInputValues((currentValues) => ({ ...currentValues, [size]: value }));
  };

  return (
    <View>
      <Input
        value={inputValues["2xs"] ?? ""}
        onChange={(event) => updateInputValue("2xs", event.target.value)}
        size="2xs"
        placeholder="2xs input"
      />
      <Input
        value={inputValues.xs ?? ""}
        onChange={(event) => updateInputValue("xs", event.target.value)}
        size="xs"
        placeholder="xs input"
      />
      <Input
        value={inputValues.sm ?? ""}
        onChange={(event) => updateInputValue("sm", event.target.value)}
        size="sm"
        placeholder="sm input"
      />
      <Input
        value={inputValues.md ?? ""}
        onChange={(event) => updateInputValue("md", event.target.value)}
        size="md"
        placeholder="md input"
      />
      <Input
        value={inputValues.lg ?? ""}
        onChange={(event) => updateInputValue("lg", event.target.value)}
        size="lg"
        placeholder="lg input"
      />
      <Input
        value={inputValues.xl ?? ""}
        onChange={(event) => updateInputValue("xl", event.target.value)}
        size="xl"
        placeholder="xl input"
      />
      <Input
        value={inputValues["2xl"] ?? ""}
        onChange={(event) => updateInputValue("2xl", event.target.value)}
        size="2xl"
        placeholder="2xl input"
      />
      <Input
        value={inputValues["3xl"] ?? ""}
        onChange={(event) => updateInputValue("3xl", event.target.value)}
        size="3xl"
        placeholder="3xl input"
      />
    </View>
  );
}