Textarea
Multi Language Textarea
A textarea component that supports multiple languages
Loading...
Usage
The Multi Language Textarea component allows users to enter multiline text in multiple languages with a language selector dropdown.
import { MultilangTextarea, MultiLangValue } from "@/components/naseem-ui/elements/multilang-textarea"
import { useState } from "react"
export default function Example() {
const [values, setValues] = useState<MultiLangValue>({
en: "",
ar: ""
})
return (
<MultilangTextarea
value={values}
onChange={setValues}
locales={[
{ code: "en", name: "English" },
{ code: "ar", name: "Arabic" }
]}
placeholder="Enter multiline text"
/>
)
}Features
- Language selector dropdown
- Stores values per language code
- Supports any number of languages
- Built on Radix UI dropdown and textarea
- Customizable locale objects
- RTL language support
- Standard textarea props supported
- Auto-resizing height
Implementation
The component uses:
- React state to track current language and values
- Radix UI dropdown for language selection
- Radix UI Textarea component
- TypeScript interfaces for type safety
Props
Prop
Type
Dependencies
{
"@radix-ui/react-dropdown-menu": "latest",
"@radix-ui/react-textarea": "latest",
"react": "latest"
}