[blocks]: Inputs with left/right adornment,helperText & label

[timurbesli]

Description

This would be super good to have on Inputs

https://mui.com/material-ui/react-text-field/

Example

https://mui.com/material-ui/api/input-adornment/

[timurbesli]

Here is my Implementation by customizing the Input Component from shadcn components
Usage:

<Input 
startAdornment="$" 
endAdornment="per 30-min"
label="Bonus Value" 
helperText="Enter the bonus value per 30-min.">
</Input>

Customized props for optional label,helperText,startAdornement and endAdornment parameters. _(start and end adororments are ReactNodes so you can pass icons & stuff like the password hide/show eye icon)

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  helperText?: string;
  startAdornment?: React.ReactNode;
  endAdornment?: React.ReactNode;
}

Here is the customized input component using these props.

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, label, helperText, startAdornment, endAdornment, ...props }, ref) => {
  return (
    <div className="flex flex-col">
      {label && <label className="mb-1 text-sm  text-gray-700">{label}</label>}
      <div
        className={cn(
          "flex items-center h-10 w-full rounded-md border border-input bg-background text-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}>
        {startAdornment && <span className="px-3 text-sm text-muted-foreground">{startAdornment}</span>}
        <input
          type={type}
          className={cn("flex-1 px-3 py-2 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50")}
          ref={ref}
          {...props}
        />
        {endAdornment && <span className="px-3 text-sm text-muted-foreground">{endAdornment}</span>}
      </div>
      {helperText && <span className="mt-1 text-xs text-muted-foreground">{helperText}</span>}
    </div>
  );
});

Input.displayName = "Input";

[eelior]

Here is another implementation:

import * as React from 'react';

import { cn } from '~/core/generic/shadcn-utils';

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  startAdornment?: React.ReactNode;
  endAdornment?: React.ReactNode;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, startAdornment, endAdornment, ...props }, ref) => {
    return (
      <div className="relative flex items-center w-full">
        {startAdornment && (
          <span className="absolute right-0 pr-3 text-sm text-muted-foreground">
            {startAdornment}
          </span>
        )}
        <input
          type={type}
          className={cn(
            'h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
            startAdornment ? 'pr-10' : '',
            endAdornment ? 'pl-10' : '',
            className,
          )}
          ref={ref}
          {...props}
        />
        {endAdornment && (
          <span className="absolute left-0 pl-3 text-sm text-muted-foreground">
            {endAdornment}
          </span>
        )}
      </div>
    );
  },
);

Input.displayName = 'Input';

export { Input };

[bfourgeaud]

To keep focus states and variants intact while handling start and endContent on input here is my implementation :

import * as React from "react"

import { cn } from "@/lib/utils"
import { VariantProps, cva } from "class-variance-authority"

export const inputVariants = cva(
  "flex items-center h-10 w-full px-3 py-2 text-sm bg-transparent file:border-0 file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border border-transparent focus-within:outline-none aria-invalid:ring-1 aria-invalid:ring-destructive aria-invalid:focus-within:ring-2 aria-invalid:focus-within:ring-destructive",

  {
    variants: {
      rounded: {
        none: "rounded-none",
        md: "rounded-md",
      },
      variant: {
        outline:
          "border-borde focus-within:border-primary focus-within:shadow-[0_0px_0px_1px_hsl(var(--primary))] aria-invalid:border-transparent",
        filled:
          "border-2 bg-background focus-within:border-primary focus-within:bg-transparent",
        underlined:
          "rounded-none border-b-border focus-within:border-b-primary focus-within:shadow-[0_1px_0px_0px_hsl(var(--primary))]",
        unstyled: "",
      },
    },
    defaultVariants: {
      rounded: "md",
      variant: "outline",
    },
  }
)

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement>,
    VariantProps<typeof inputVariants> {
  startContent?: React.ReactNode
  endContent?: React.ReactNode
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    { className, rounded, variant, startContent, endContent, ...props },
    ref
  ) => {
    return (
      <div
        className={cn(
          inputVariants({ variant, rounded, className }),
          className
        )}
      >
        {startContent && (
          <span className="pointer-events-none flex items-center text-muted-foreground">
            {startContent}
          </span>
        )}
        <input
          ref={ref}
          {...props}
          className={cn(
            "w-full bg-transparent outline-none focus-visible:outline-none",
            {
              "pl-1.5": !!startContent,
              "pr-1.5": !!endContent,
            }
          )}
        />
        {endContent && (
          <span className="pointer-events-none flex items-center text-muted-foreground">
            {endContent}
          </span>
        )}
      </div>
    )
  }
)
Input.displayName = "Input"

export { Input }

[barrownicholas]

great implementation, thanks for sharing!! saved me a ton of time writing this myself.