Input Text

Simple text input component

Usage

<>
  <InputText size="lg" className="mb_md" placeholder="Large" />
  <InputText size="md" className="mb_md" placeholder="Medium" />
  <InputText size="sm" className="mb_md" placeholder="Small" />
</>

Source

import cn from "classnames";

export default function InputText({
  id,
  value,
  onChange,
  size,
  className,
  placeholder,
  labelText,
  labelClassName,
  containerClassName,
}) {
  const container = cn(containerClassName);

  const label = cn({
    "d_b": true,
    "fz_md": size === "md",
    "fz_lg": size === "lg",
  }, labelClassName);

  const input = cn({
    "d_b w_100% bd_black bdrs_xs": true,
    "px_lg py_sm": size === "sm",
    "px_xl py_md fz_md": size === "md",
    "px_xl py_md fz_lg": size === "lg",
  }, className);

  return (
    <div className={container}>
      {labelText && (
        <label htmlFor={id} className={label}>
          {labelText}
        </label>
      )}

      <input
        id={id}
        value={value}
        onChange={onChange}
        type="text"
        className={input}
        placeholder={placeholder}
      />
    </div>
  );
}

Label

Source

<div>
  <label class="d_b" for="id">Label</label>
  <input
    id="id"
    type="text"
    name="inputname"
    class="d_b w_100p px_md py_sm bd_black bdrs_xs"
    placeholder="Placeholder"
  />
</div>