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