Input

import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Input } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <Input placeholder="Enter text..." />
    </Field>
  );
}

import type { ComponentPropsWithRef } from "react";
 
import { Input } from "@optiaxiom/react";
 
export function App({
  size,
}: Pick<ComponentPropsWithRef<typeof Input>, "size">) {
  return <Input placeholder="Enter text..." size={size} />;
}

import { Input } from "@optiaxiom/react";
 
export function App() {
  return <Input defaultValue="Some invalid value" error />;
}

import { Input } from "@optiaxiom/react";
 
export function App() {
  return <Input defaultValue="Some disabled value" disabled />;
}

import { Input } from "@optiaxiom/react";
 
export function App() {
  return <Input defaultValue="Some read-only value" readOnly />;
}

import { Button, Flex, Input } from "@optiaxiom/react";
import { IconEye, IconEyeOff } from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [hidden, setHidden] = useState(true);
 
  return (
    <Flex flexDirection={["column", "row"]}>
      <Input addonBefore="@" placeholder="Email" />
      <Input addonAfter="kg" placeholder="Weight" />
      <Input
        addonAfter={
          <Button
            appearance="subtle"
            icon={hidden ? <IconEye /> : <IconEyeOff />}
            onClick={() => setHidden((flag) => !flag)}
            rounded="full"
            size="sm"
          />
        }
        placeholder="Password"
        type={hidden ? "password" : "text"}
      />
    </Flex>
  );
}

import { Input } from "@optiaxiom/react";
import { type ComponentPropsWithoutRef } from "react";
 
export function App({
  addonPointerEvents = "none",
}: Pick<ComponentPropsWithoutRef<typeof Input>, "addonPointerEvents">) {
  return (
    <Input
      addonBefore="@"
      addonPointerEvents={addonPointerEvents}
      placeholder="Email"
    />
  );
}