Button inside or along input for a copy+paste situation

[acidjazz]

Description

Im looking to create a layout where the button and input blend together nicely, sort of like how u-button-group works.

Something like this:

Does this strategy exist already? Can I get an example?

[brycecammo]

You can use the #trailing slot of the UInput component to put the button there.

Quick example:

<UInput :ui="{icon: {trailing: {pointer: 'pointer-events-auto'}}}">
    <template #trailing>
      <UButton icon="i-heroicons-document-duplicate" variant="outline" color="gray" class="rounded-none rounded-r-md -me-2.5" @click="click" />
    </template>
</UInput>

Output:

You probably want to adjust the padding on the :ui prop of the input, instead of the negative margin (-me-2.5), to ensure it works properly at different breakpoints. Hopefully that gets you started though.

[acidjazz]

You can use the #trailing slot of the UInput component to put the button there.

Quick example:

<UInput :ui="{icon: {trailing: {pointer: 'pointer-events-auto'}}}">
    <template #trailing>
      <UButton icon="i-heroicons-document-duplicate" variant="outline" color="gray" class="rounded-none rounded-r-md -me-2.5" @click="click" />
    </template>
</UInput>

Output:

You probably want to adjust the padding on the :ui prop of the input, instead of the negative margin (-me-2.5), to ensure it works properly at different breakpoints. Hopefully that gets you started though.

Thanks! i tried it this way - only issue w/ this way is the button click behavior is not working well

[brycecammo]

Yeah, in the playground I found the pointer-events class on the input did the trick, but there might also be some layering/z-index issue to work around.

[acidjazz]

Yeah, in the playground I found the pointer-events class on the input did the trick, but there might also be some layering/z-index issue to work around.

Nice! I'll use this for now.

I think it would be cool if either u-form-group or u-button-group took care of this and we didn't have to nest

[acidjazz]

Really happy with this outcome:

<u-button-group>
  <u-input color="gray" />
  <u-button
    icon="i-mdi-content-copy"
    size="xs"
    color="gray"
    @click="copyUrl()"
  />
</u-button-group>

[acidjazz]

I think it might make a good example on the button page? I can attach a PR?

[benjamincanac]

I guess we could add the same example as https://ui.nuxt.com/elements/button#group in the /form/input page to show that ButtonGroup works with inputs.