Socials Input - HapplyUI

A searchable social media URL picker with tag chips and inline URL editing. Supports Instagram, X (Twitter), LinkedIn, Facebook, YouTube, TikTok, Zoom, and Calendar. Uses ComboBox for platform selection with search filtering.

Installation

bunx @happlyui/cli@latest add socials-input

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

button
combo-box
form-field-context
use-form-field-binding
hint
input
tag

Usage

import SocialsInput from "@/components/ui/socials-input"

<SocialsInput
  name="socials"
  formValue={values}
  setFormValue={setValues}
/>

Examples

Default

Default usage with the 6 main social platforms.

<SocialsInput
  name="socials"
  formValue={values}
  setFormValue={setValues}
/>

With Existing Values

Pre-populated with saved social URLs displayed as tags.

@happly_app

Ahmaad Ansari

<SocialsInput
  name="socials"
  formValue={{
    instagram: 'https://instagram.com/happly_app',
    linkedin: 'https://linkedin.com/in/ahmaad-ansari',
  }}
  setFormValue={setValues}
/>

All Socials

Pass null to show all available platforms including Zoom and Calendar.

<SocialsInput
  name="socials"
  availableSocials={null}
  formValue={values}
  setFormValue={setValues}
/>

With Form Field

Composed with FormField using props-driven label, hint, and info.

Social Media(Optional)

Add at least one social media profile.

<FormField.Root
  label="Social Media"
  labelSub="Optional"
  labelSubParens
  labelInfo="Add your social media profiles."
  hint="Add at least one social media profile."
>
  <SocialsInput name="socials" />
</FormField.Root>

Error State

Error state using FormField error prop for form-level validation messages.

Social Media*

Please add at least one social media profile.

<FormField.Root
  label="Social Media"
  required
  error="Please add at least one social media profile."
>
  <SocialsInput name="socials-error" />
</FormField.Root>

Read Only

Read-only mode disables the dropdown and hides dismiss buttons on tags.

@happly_app

Ahmaad Ansari

<SocialsInput
  name="socials"
  readOnly
  formValue={values}
  setFormValue={setValues}
/>

Custom Labels

Override labels for internationalization.

<SocialsInput
  name="socials"
  formValue={values}
  setFormValue={setValues}
  labels={{
    placeholder: 'Ajouter un réseau social...',
    errorUrl: 'Veuillez saisir une URL valide',
  }}
/>

API Reference

SocialsInput

The main component.

Prop	Type	Default	Description
`name`	`string`	-	Field name for form integration and error key namespacing.
`readOnly`	`boolean`	`false`	Disables the dropdown and hides dismiss buttons.
`hasError`	`boolean`	`false`	External error state. Applies error ring to the dropdown trigger. Also activates automatically on internal validation errors.
`availableSocials`	`SocialKey[] \| null`	`['instagram', 'x-twitter', 'linkedin', 'facebook', 'youtube', 'tiktok']`	Social platforms to show in the dropdown. Pass null for all platforms including Zoom and Calendar.
`formValue`	`Record<string, string>`	`{}`	Current form values as a record of social key to URL.
`setFormValue`	`(value: Record<string, string>) => void`	-	State setter for the form values.
`labels`	`Partial<SocialsInputLabels>`	-	Override labels for i18n. Keys: placeholder, errorUrl, errorCalendarUrl, errorZoomUrl.