Input Utilities

Utility functions for generating input classes with variants, sizes, and styling options.

Import

import { getInputClasses, getInputVariant, getInputSize } from "amvasdev-ui";

Functions

getInputClasses

Returns a complete set of input classes including base styles, variant, size, and border styles

getInputClasses(options): string

Parameters:

  • options (optional) - Input styling options

Returns: string - Complete input class names

getInputVariant

Returns only the variant-specific class names

getInputVariant(variant): string

Parameters:

  • variant (required) - Input color variant

Returns: string - Variant-specific class names

getInputSize

Returns only the size-specific class names

getInputSize(size): string

Parameters:

  • size (required) - Input size

Returns: string - Size-specific class names

Interactive Demo

Preview:

Generated Classes:

ui:input ui:input-primary ui:input-md ui:input-bordered

Examples

Complete Input Classes

import { getInputClasses } from "amvasdev-ui";

const inputClasses = getInputClasses({
  variant: "primary",
  size: "md",
  bordered: true,
});

<input className={inputClasses} placeholder="Enter text" />

Variant Only

import { getInputVariant } from "amvasdev-ui";

const variantClasses = getInputVariant("primary");

<input className={`input ${variantClasses}`} />

Size Only

import { getInputSize } from "amvasdev-ui";

const sizeClasses = getInputSize("md");

<input className={`input ${sizeClasses}`} />

Custom Input Component

import { getInputClasses } from "amvasdev-ui";
import { forwardRef } from "react";

const CustomInput = forwardRef(({ variant = "base", size = "md", ...props }, ref) => {
  const classes = getInputClasses({ variant, size, bordered: true });

  return <input ref={ref} className={classes} {...props} />;
});

Notes

  • Available variants: base, ghost, primary, secondary, accent, success, info, warning, error
  • Available sizes: xs, sm, md, lg