Inputs

PinInput

Description

The PinInput component is a customizable UI element used for capturing multi-digit inputs, such as PIN codes or verification codes. It supports different input styles, secret mode for sensitive inputs, and validation mechanisms. This component is ideal for applications requiring secure and user-friendly PIN or code entry.

Use Case

The PinInput component is ideal for:

• Capturing PIN codes for authentication.
• Inputting verification codes sent via SMS or email.
• Securely entering multi-digit passwords or access codes.

Props Table

Prop Name	Type	Description	Default Value	Required
fillType	"fill" | "transparent" | "outlined" | "bottom"	Defines the style of the input fields.	"fill"	No
numberOfFields	4 | 5 | 6	The number of input fields.	4	No
onValueChange	(pinValue: string) => void	Callback function to be called when the PIN value changes.	undefined	Yes
value	string	The current value of the PIN input.	""	Yes
label	string	The label to be displayed above the input fields.	""	No
labelPosition	'center' | 'start' | 'end'	The alignment of the label.	'start'	No
validations	((...args: unknown[]) => void)[]	Array of validation functions to validate the PIN value.	undefined	No
secret	boolean	Whether to hide the input values (e.g., for PIN or password entry).	false	No

Example Use Case

Example 1: Basic PIN Input

A basic PIN input with 4 fields.

<PinInput
  value="1234"
  onValueChange={(pin) => console.log(pin)}
/>

SearchInput

Description

The SearchInput component is a versatile and customizable UI element used for search functionality. It supports different input styles, auto-search capabilities, and can display suggestions based on the input. This component can be used to enhance the user experience by providing real-time search results and suggestions.

Use Case

The SearchInput component is ideal for:

• Implementing search functionality in applications.
• Providing a search bar with real-time suggestions.
• Creating dropdown search inputs for selecting from a list of options.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"default" | "outline" | "shadow"	Defines the style of the search input container.	"default"	No
resultsStyleType	"default" | "outline" | "alternative-fill"	Defines the style of the search results container.	undefined	No
inputType	"search" | "dropdown"	Defines the type of the input, whether it's a search or dropdown.	"search"	No
searchString	string	The initial search string value.	""	No
label	string	The label to be displayed above the search input.	undefined	No
autoSearch	boolean	Whether to perform the search automatically as the user types.	false	No
suggestions	boolean	Whether to display search suggestions.	true	No
handleSearch	(value: string) => void	Callback function to handle the search action.	undefined	No
dataset	T[]	The dataset to be used for displaying search suggestions.	undefined	No
renderItem	(item: T, index: number) => React.JSX.Element	Function to render each item in the search suggestions list.	undefined	No
placeholder	string	The placeholder text for the search input.	""	No
onValueChange	(value: string) => void	Callback function to be called when the input value changes.	undefined	No

Example Use Case

Example 1: Basic Search Input

A basic search input with a search button.

<SearchInput
  placeholder="Search..."
  handleSearch={(value) => console.log("Search for:", value)}
/>

Slider

Description

The Slider component is a customizable UI element used for selecting a value from a range. It supports different styles, customizable colors, and can display the selected value as a percentage. This component is ideal for applications requiring user input for adjustable settings or preferences.

Use Case

The Slider component is ideal for:

• Adjusting settings such as volume, brightness, or other preferences.
• Selecting a value from a range in forms or settings pages.
• Providing a visual representation of progress or value selection.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"slide" | "progress"	Defines the style of the slider.	"slide"	No
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	Callback function to be called when the slider value changes.	undefined	No
value	number	The current value of the slider.	0	Yes
showPercentage	boolean	Whether to display the value as a percentage next to the slider.	false	No
label	string	The label to be displayed above the slider.	undefined	No
progressColor	string	The color of the progress bar in the slider.	color?.accent100	No
backgroundColor	string	The background color of the slider.	color?.foregroundInverse300	No

Example Use Case

Example 1: Basic Slider

A basic slider to adjust a value.

<Slider
  value={50}
  onChange={(e) => console.log(e.target.value)}
/>

TextArea

Description

The Textarea component is a customizable and versatile UI element used for capturing multi-line text input. It supports different styles, labels, validation messages, and placeholders. This component is ideal for forms or any other input scenarios where users need to enter longer text.

Use Case

The Textarea component is ideal for:

• Capturing user input in forms.
• Providing an area for comments or feedback.
• Allowing multi-line text entry in applications.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"fill" | "outlined" | "outline-only"	Defines the style of the textarea.	"fill"	No
label	string	The label to be displayed above the textarea.	undefined	No
errorMessage	string	The error message to be displayed if validation fails.	undefined	No
placeholder	string	The placeholder text for the textarea.	"Enter your text"	No
onChange	(event: React.ChangeEvent<HTMLTextAreaElement>) => void	Callback function to be called when the textarea value changes.	undefined	No
value	string	The current value of the textarea.	""	No
validations	((...args: unknown[]) => void)[]	Array of validation functions to validate the textarea value.	undefined	No

Example Use Case

Example 1: Basic Textarea

A basic textarea for user input.

<Textarea
  placeholder="Enter your comments"
  onChange={(e) => console.log(e.target.value)}
  value=""
/>

TextInput