Textarea

<bh-textarea> | BharatTextarea

The Textarea component provides a customizable multi-line input element. It supports dynamic sizing, variants, and style overrides.

Open in

Basic Usage

Open in

<bh-textarea
  background="#191A1E"
  border="1px solid #191A1E"
  borderRadius="4px"
  color="white"
  fontSize="14px"
  placeholder="Custom styled textarea">
</bh-textarea>

<bh-textarea
  background="#f9f9f9"
  border="1px solid"
  borderRadius="4px"
  color="black"
  fontSize="14px"
  placeholder="Custom styled textarea">
</bh-textarea>

import React from 'react';
import { BharatTextarea } from 'bharat-ui/react/components/textarea';
function App() {
return (
  <BharatTextarea
    background="#191A1E"
    border="1px solid #191A1E"
    borderRadius="4px"
    color="white"
    fontSize="14px"
    placeholder="Custom styled textarea">
    BharatTextarea
  </BharatTextarea>

  <BharatTextarea
    background="#f9f9f9"
    border="1px solid"
    borderRadius="4px"
    color="black"
    fontSize="14px"
    placeholder="Custom styled textarea">
    BharatTextarea
  </BharatTextarea>
);
}
export default App;

Custom Styling

Open in

<bh-textarea
  resize="none"
  rows="4"
  cols="4"
  border="2px dashed blue"
  borderRadius="8px"
  background="#f9f9f9"
  fontSize="14px"
  placeholder="Custom styled textarea"
></bh-textarea>

import React from 'react';
import { BharatTextarea } from 'bharat-ui/react/components/textarea';
function App() {
return (
  <BharatTextarea
    resize="none"
    rows="4"
    cols="4"
    border="2px dashed blue"
    borderRadius="8px"
    background="#f9f9f9"
    fontSize="14px"
    placeholder="Custom styled textarea"
    >
    BharatTextarea
  </BharatTextarea>
);
}
export default App;

Properties

Property	Type	Description
`rows`	`number`	Specifies the visible number of lines in the textarea.
`cols`	`number`	Specifies the visible width of the textarea (in character columns).
`resize`	`string`	Controls the resize behavior. Options: `"both"`, `"horizontal"`, `"vertical"`, `"none"`.
`placeholder`	`string`	`"Enter text here..."`
`value`	`string`	The current value of the textarea.
`disabled`	`boolean`	Disables the textarea when `true`.
`required`	`boolean`	Marks the field as required for form submission.
`readonly`	`boolean`	Makes the textarea read-only (user cannot edit the value).
`maxlength`	`number`	Maximum number of characters allowed.
`minlength`	`number`	Minimum number of characters required.
`width`	`string`	CSS width value. Overrides default.
`height`	`string`	CSS height value. Overrides default.
`borderRadius`	`string`	Border radius styling.
`border`	`string`	Custom border style (e.g. `"1px solid red"`).
`background`	`string`	Background color.
`color`	`string`	Text color.
`fontSize`	`string`	Font size of the textarea content.