EmojiPickerInput
EmojiPickerInput opens an emoji picker from a form field and stores the selected Unicode emoji.
Source
LLM docs
Package
npm install @plocks/emoji-pickerExamples
2
Properties
69
Basics
Pick an emoji from the field or clear the selection.
Loading demo…
import { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { EmojiPickerInput } from '@plocks/emoji-picker';
export function Demo() {
const [emoji, setEmoji] = useState<string | null>(null);
return (
<Block gap="sm" w="100%" maw={360}>
<EmojiPickerInput label="Reaction" placeholder="Choose an emoji" value={emoji} onChange={setEmoji} clearable />
<Text c="muted" size="sm">Selected: {emoji ?? 'None'}</Text>
</Block>
);
}Variants
Compare the default, filled, outline, and unstyled field shells on EmojiPickerInput.
Loading demo…
import { Column } from '@plocks/ui';
import { EmojiPickerInput } from '@plocks/emoji-picker';
const variants = ['default', 'filled', 'outline', 'unstyled'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<EmojiPickerInput key={variant} variant={variant} label={`${variant} variant`} placeholder="Choose a reaction" />
))}
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources