Input

Text input built with Chakra UI Input.

To use Input as a form element (with label, required indicator, hint, error message etc) see Form Control.

Basic usage

import { Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Input placeholder="Placeholder" />;
}

⛶

Addons

Input has “addons” that can be appended to the left and right side of the Input component, using leftAddon and rightAddon. They can contain a JSX Element or a string.

import { CartIcon, Input, SmileIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Input placeholder="Placeholder" leftAddon={<CartIcon />} rightAddon={<SmileIcon />} />;
}

⛶

Elements

You might need to add an icon or button inside the input component. Use leftElement and rightElement to apply either a JSX Element or a string here.

import { AddIcon, IconButton, Input, SearchIcon, ThemeIconSize } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Input
      placeholder="Placeholder"
      leftElement={<SearchIcon size={ThemeIconSize.Small} />}
      rightElement={<IconButton aria-label="Add" variant="ghost" icon={AddIcon} size="sm" />}
    />
  );
}

⛶

Combining addons and elements on the same side is not supported.

import { CardIcon, CartIcon, CommentIcon, Input, SmileIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Input
      placeholder="Placeholder"
      leftAddon={<CommentIcon />}
      rightAddon={<CardIcon />}
      leftElement={<CartIcon />}
      rightElement={<SmileIcon />}
    />
  );
}

⛶

Custom visual states

In addition to the native invalid-state (isInvalid set to true) there are two custom states that are visual only.

import { Input, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack spacing="1rem">
      <Input placeholder="Success!" visualState="success" />
      <Input placeholder="Warning!" visualState="warning" />
    </Stack>
  );
}

⛶

Ghost input

Input has the variant “ghost” which makes it look like an ordinary text when not focused. When focused it acts just like an ordinary input.

import { Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Input variant="ghost" placeholder="Write here..." />;
}

⛶

Controlled vs Internal state

By default, the input component is uncontrolled. This means that the value of the input is stored internally in the component. If you want to control the value of the input from the outside, you can use the value and onChange props.

import { Input } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("");
  return (
    <Input value={value} onChange={(event) => setValue(event.target.value)} placeholder="Controlled input" />
  );
}

⛶

You can also use the defaultValue prop to set the initial value of the input, still keeping it uncontrolled.

import { Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Input defaultValue="My default value" onBlur={(event) => console.log(event)} />;
}

⛶