Biofarma | Bind UI

Text Area

Interface element that allows users to enter multi-line text. It is typically used for entering longer pieces of text, such as comments, descriptions, or messages, and is often characterized by its scrollable nature, which allows the text box to grow and accommodate more content as the user types.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Label

Helper text0/100

Usage

import { TextArea } from 'bio-bind-ui';

<TextArea
  defaultRows={2}
  errorText='Error text'
  helperText='Helper text'
  id='textarea'
  label='Label'
  maxLength={100}
  maxRows={4}
  mode='light'
  onChange={() => {}}
  placeholder='Placeholder'
  showCount
  style={{
    height: 'auto',
    width: 'auto',
  }}
  value=''
/>

Examples

Required Text Area

A required text area component in a user interface (UI) serves several important functions to enhance user experience and ensure proper form submission.

Label *

Helper text0/100

Mode (Optional)

Use mode to use dark or light.

Label *

Helper text0/100

Label Text Area (Optional)

Text area with show label only

Label

Props

Props	Required	Default	Type	description
value	false	`[]`	`string`	Value for the textarea.
onChange	true	-	`function`	Handle changes in the input values of form elements.
mode	false	`light`	`light` `dark`	Light & dark mode.
label	true	`label`	`string`	Label for the textarea.
placeholder	true	`placeholder`	`string`	Placeholder for the textarea.
id	true	`textarea`	`string`	ID for text area.
defaultRows	true	`2`	`number[]`	Default rows for the textarea.
maxRows	true	`4`	`number[]`	Max rows for the textarea.
showCount	true	`true`	`boolean`	Show count for the textarea.
maxLength	true	`100`	`number[]`	Max length for the textarea.
disabled	true	`false`	`boolean`	Disabled state for the textarea.
required	true	`false`	`boolean`	Required state for the textarea.
isError	true	`false`	`boolean`	Error state for the textarea.
errorText	true	`error text`	`string`	Error text for the textarea.
helperText	true	`helper text`	`string`	Helper text for the textarea.
style	false	-	`CSSProperties`	Custom styles for the text area component.
name	true	`textarea`	`string`	Name prop is commonly used in form elements, such as text areas.

Switch Time Picker