Function TextInput

apps/web/ui/TextInput/index.tsx:35–107

({
  className,
  type,
  id,
  name,
  placeholder,
  required,
  label,
  defaultValue,
  value,
  style,
  disabled = false,
  readOnly = false,
  icon,
  inputRef,
  onChange,
  onInput,
  onBlur,
  onFocus,
  onKeyDown,
  onKeyUp,
  autoComplete,
  autoFocus,
  title,
  pattern,
  size,
  rounded,
  ...rest
}: Props)

}

function TextInput({
  className,
  type,
  id,
  name,
  placeholder,
  required,
  label,
  defaultValue,
  value,
  style,
  disabled = false,
  readOnly = false,
  icon,
  inputRef,
  onChange,
  onInput,
  onBlur,
  onFocus,
  onKeyDown,
  onKeyUp,
  autoComplete,
  autoFocus,
  title,
  pattern,
  size,
  rounded,
  ...rest
}: Props) {
  return (
    <>
      {label && <Label htmlFor={id}>{label}</Label>}
      <div className={styles.container}>
        {icon && (
          <div
            className={classNames(styles.icon, { [styles.lg]: size === 'lg' })}
          >
            {icon}
          </div>
        )}
        <input
          ref={inputRef}
          className={classNames(styles.input, className, {
            [styles.lg]: size === 'lg',
            [styles.rounded]: rounded === 'full',
            [styles.disabled]: disabled,
          })}
          type={type}
          id={id}
          name={id || name}
          placeholder={placeholder}
          required={required}
          defaultValue={defaultValue}
          value={value}
          disabled={disabled}
          readOnly={readOnly}
          onChange={onChange}
          onInput={onInput}