Pikas UI

@pikas-ui/textfield

This package contains a textfield component that can be used in your React application.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/textfield

yarn add @pikas-ui/textfield

pnpm add @pikas-ui/textfield

Usage

Textfield

With the Textfield component, you can create a textfield.

Textfield label

Eu est labore ea laborum laborum mollit non minim eu commodo.

import { Textfield } from '@pikas-ui/textfield';

const Example: React.FC = () => {
  return (
    <Textfield
      label="Textfield label"
      description="Eu est labore ea laborum laborum mollit non minim eu commodo."
      required
    />
  );
};

Props

Props extends InputHTMLAttributes<HTMLInputElement>

Prop	Description	Type	Default
`type`	The type of the textfield.	`TextfieldType`	`"text"`
`label`	The label of the textfield.	`string` or `ReactNode`	-
`boxShadow`	The box shadow of the textfield.	`PikasShadow`	`"inner-md"`
`borderRadius`	The border radius of the textfield.	`PikasRadius`	`"md"`
`padding`	The padding of the textfield.	`TextfieldPadding`	`"md"`
`gap`	The gap of the textfield.	`TextfieldGap`	-
`fontSize`	The font size of the textfield.	`PikasFontSize`	`"em-base"`
`colorName`	The color of the textfield.	`PikasColors`	-
`colorHex`	The color hex of the textfield.	`string`	-
`placeholderColorName`	The placeholder color of the textfield.	`PikasColors`	`"black-light"`
`placeholderColorHex`	The placeholder color hex of the textfield.	`string`	-
`borderColorName`	The border color of the textfield.	`PikasColors`	`"transparent"`
`borderColorHex`	The border color hex of the textfield.	`string`	-
`borderWidth`	The border width of the textfield.	`number`	`0`
`backgroundColorName`	The background color of the textfield.	`PikasColors`	`"gray-lightest-1"`
`backgroundColorHex`	The background color hex of the textfield.	`string`	-
`textError`	The error text of the textfield.	`string`	-
`onChange`	The onChange event of the textfield.	`(e: ChangeEvent<HTMLInputElement>) => void`	-
`defaultValue`	The default value of the textfield.	`string`	-
`autoComplete`	The autoComplete of the textfield.	`string`	-
`LeftIcon`	The left icon of the textfield.	`FC<IconProps>`	-
`RightIcon`	The right icon of the textfield.	`FC<IconProps>`	-
`leftChildren`	The left children of the textfield.	`ReactNode`	-
`rightChildren`	The right children of the textfield.	`ReactNode`	-
`css`	The css of the textfield.	`TextfieldCSS`	-
`outline`	The outline of the textfield.	`boolean`	`true`
`description`	The description of the textfield.	`string`	-
`width`	The width of the textfield.	`string or number`	`"100%"`
`maxWidth`	The max width of the textfield.	`string or number`	`"100%"`
`minWidth`	The min width of the textfield.	`string or number`	-
`leftIconColorName`	The left icon color of the textfield.	`PikasColors`	-
`leftIconColorHex`	The left icon color hex of the textfield.	`string`	-
`rightIconColorName`	The right icon color of the textfield.	`PikasColors`	-
`rightIconColorHex`	The right icon color hex of the textfield.	`string`	-
`leftIconSize`	The left icon size of the textfield.	`number`	-
`rightIconSize`	The right icon size of the textfield.	`number`	-
`required`	The required of the textfield.	`boolean`	`false`
`info`	Add a info icon with a tooltip.	`string`	-
`data`	The data of the textfield.	`DOMStringMap`	-

Contributing

This documentation can be edited on GitHub here