Textarea

Showcase

React

import { Textarea } from '@klnjs/react-textarea'
import classes from './textarea.module.css'

export default () => <Textarea autosize className={classes.textarea} />

Styles

.textarea {
  border-radius: 0.5rem;
  border: 1px solid var(--sl-color-hairline-light);
  padding: 6px;
  outline: none;
  overflow: hidden;
  background: var(--sl-color-black);
  background-clip: padding-box;
}

.textarea:hover {
  color: var(--sl-color-white);
  border-color: var(--sl-color-white);
}

.textarea:focus {
  border-color: var(--sl-color-accent-high);
}

Features

• Controlled or uncontrolled.

• Autosizing with min and max rows.

Installation

bun install @klnjs/react-textarea

Components

• Textarea

Textarea

Use the autosize prop to enable the textarea to grow and shrink to fit its content. Use the minRows and maxRows props to set the minimum and maximum number of rows the textarea can have.

Prop	Type	Default
asChild	boolean	false
value	string	-
defaultValue	string	-
autosize	boolean	true
minRows	number	2
maxRows	number	Infinity
onChange	(value: string) => void	-