MultipleEmails

Label

E-mail

Estado atual:

[
  {
    "label": "Principal",
    "address": "contato@empresa.com.br"
  }
]

Carregando...

Instalação

npx @koddaai/ui add multiple-emails

Dependências shadcn/ui: form, input, button

Dependências npm: react-hook-form

import { MultipleEmails } from "@/components/kodda/multiple-emails"

Prop	Tipo	Default	Descrição
`form`	`UseFormReturn`	—	Instância do react-hook-form
`name`	`string`	`"emails"`	Nome do field array no formulário
`disabled`	`boolean`	`false`	Desabilita todos os campos
`className`	`string`	—	Classes adicionais no container
`addLabel`	`string`	`"Adicionar e-mail"`	Texto do botão de adicionar
`labelPlaceholder`	`string`	`"Label"`	Label do campo de identificação
`emailLabel`	`string`	`"E-mail"`	Label do campo de e-mail
`emailPlaceholder`	`string`	—	Placeholder do campo de e-mail
`firstLabelLocked`	`boolean`	`true`	Trava o label do primeiro item (ex: "Principal")

Cada item do array possui:

Campo	Tipo	Descrição
`label`	`string`	Identificação do e-mail (ex: "Principal", "Financeiro")
`address`	`string`	Endereço de e-mail

const form = useForm({
  defaultValues: {
    emails: [{ label: "Principal", address: "" }],
  },
})

<MultipleEmails form={form} />

<MultipleEmails
  form={form}
  addLabel="Add email"
  labelPlaceholder="Type"
  emailLabel="Email address"
  firstLabelLocked={false}
/>

O primeiro item não pode ser removido. O label do primeiro item é travado por padrão (firstLabelLocked).