Textarea

lunar add textarea

import { Textarea } from '@/components/ui/textarea';

const [value, setValue] = useState('');
 
<Textarea
value={value}
onChangeText={setValue}
placeholder="Enter your message..."
/>

<Textarea
label="Description"
value={description}
onChangeText={setDescription}
placeholder="Enter a description..."
/>

<Textarea
label="Bio"
value={bio}
onChangeText={setBio}
error="Bio is required"
/>

// Small (2 rows)
<Textarea rows={2} placeholder="Short input..." />
 
// Medium (4 rows - default)
<Textarea rows={4} placeholder="Default size..." />
 
// Large (8 rows)
<Textarea rows={8} placeholder="Larger input..." />

<Textarea
label="Notes"
value="This cannot be edited"
editable={false}
/>

export function TextareaWithCount({ maxLength = 280 }) {
const [value, setValue] = useState('');
 
return (
  <View className="gap-1">
    <Textarea
      value={value}
      onChangeText={setValue}
      placeholder="What's on your mind?"
      maxLength={maxLength}
    />
    <Text
      variant="muted"
      size="sm"
      align="right"
      className={value.length >= maxLength ? 'text-destructive' : ''}
    >
      {value.length}/{maxLength}
    </Text>
  </View>
);
}