Input

Overview

Input Field

preview

Normal Inputs

Disabled Inputs

Use disabled to disable Inputs.

Installation

input Input

Create a Folder: Make a folder named input inside sectioner/ui folder.
Create Component: Inside input, create a file called Input.jsx.
Add JSX: Copy the provided JSX code into Input.jsx.
Create CSS File: In the same folder, create a file named Input.module.css.
Add CSS: Copy the provided CSS code into Input.module.css.
Use Component: Import and use Input in your project where needed.

Input.jsx

import React from "react";
import styles from "./Input.module.css";
 
export const Input = ({
  className,
  variant = "default",
  size = "default",
  ...props
}) => {
  const stylesVariantMap = {
    default: styles.default,
    outline: styles.outline,
    ghost: styles.ghost,
    danger: styles.danger,
    success: styles.success,
  };
 
  const stylesSizeMap = {
    default: styles.defaultSize,
    small: styles.smallSize,
    large: styles.largeSize,
  };
 
  const classNames = `${styles.input} ${stylesSizeMap[size]} ${stylesVariantMap[variant]} ${className}`;
 
  return <input className={classNames} {...props} />;
};

Installation

variants: default,outline,ghost,danger,success
sizes: default,small,large

Button Single Column hero