PasswordField

PasswordField displays a field that handles passwords, allowing for showing and hiding the password.

Import

import { PasswordField } from "@prismane/core";

Usage

function Demo() {
  const [password, setPassword] = useState("password");

  const handleChange = (e) => setPassword(e.target.value);

  return <PasswordField value={password} onChange={handleChange} />;
}

With Icon

function Demo() {
  const [password, setPassword] = useState("password");

  return (
    <PasswordField
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      icon={<GearSix />}
    />
  );
}

PasswordField Variants

function Demo() {
  const [password, setPassword] = useState("password");

  return (
    <>
      <PasswordField
        variant="outlined"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        variant="filled"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        variant="underlined"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        variant="unstyled"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
    </>
  );
}

PasswordField Sizes

function Demo() {
  const [password, setPassword] = useState("password");

  return (
    <Flex direction="column" gap={fr(2)}>
      <PasswordField
        size="xs"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        size="sm"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        size="base"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        size="md"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordField
        size="lg"
        placeholder="Default Field"
        label="Default Field:"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- PasswordField

Go BackPaper

Up NextPinField