MultipleWebsites

Label

URL

Label

URL

Estado atual:

[
  {
    "label": "Site",
    "url": "https://empresa.com.br"
  },
  {
    "label": "Blog",
    "url": "https://blog.empresa.com.br"
  }
]

Carregando...

Instalação

npx @koddaai/ui add multiple-websites

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

Dependências npm: react-hook-form

import { MultipleWebsites } from "@/components/kodda/multiple-websites"

Prop	Tipo	Default	Descrição
`form`	`UseFormReturn`	—	Instância do react-hook-form
`name`	`string`	`"websites"`	Nome do field array no formulário
`disabled`	`boolean`	`false`	Desabilita todos os campos
`className`	`string`	—	Classes adicionais no container
`addLabel`	`string`	`"Adicionar website"`	Texto do botão de adicionar
`labelPlaceholder`	`string`	`"Label"`	Label do campo de identificação
`urlLabel`	`string`	`"URL"`	Label do campo de URL
`urlPlaceholder`	`string`	`"https://"`	Placeholder do campo de URL

Cada item do array possui:

Campo	Tipo	Descrição
`label`	`string`	Identificação do website (ex: "Site", "Blog")
`url`	`string`	URL do website

const form = useForm({
  defaultValues: {
    websites: [],
  },
})

<MultipleWebsites form={form} />

<MultipleWebsites
  form={form}
  addLabel="Add website"
  labelPlaceholder="Name"
  urlLabel="Website URL"
/>

Todos os itens podem ser removidos (diferente de emails e phones onde o primeiro é fixo).