Nuxt•4mo ago

textarea round only left corners

<UTextarea
          ref="textareaRef"
          v-model="content"
          autoresize
          :rows="1"
          maxlength="150"
          :maxrows="4"
          class="flex-grow"
          size="md"
          :ui="{
            base: 'rounded-s-md',
          }"
          :loading="false"
        >

<UTextarea
          ref="textareaRef"
          v-model="content"
          autoresize
          :rows="1"
          maxlength="150"
          :maxrows="4"
          class="flex-grow"
          size="md"
          :ui="{
            base: 'rounded-s-md',
          }"
          :loading="false"
        >

is this correct so that only the left corners are rounded on the textarea as it seems to still have all corners rounded?

3 Replies

kapa.ai•4mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your approach of using :ui="{ base: 'rounded-s-md' }" is correct in terms of how to override the base slot's classes for the <UTextarea> component. However, the reason you still see all corners rounded is because the default base slot for the textarea includes the class rounded-md, which applies a medium border radius to all corners. When you add rounded-s-md, it only applies to the start (left) corners, but it does not remove the existing rounded-md class, so all corners remain rounded. To achieve only the left corners rounded, you need to remove the default rounded-md and replace it with rounded-s-md. The :ui prop will merge your classes with the defaults, not replace them entirely, unless you override the whole base slot. Solution:
Override the entire base slot with your desired classes, making sure not to include rounded-md or any other rounded-* class except rounded-s-md. For example:

<UTextarea
  ref="textareaRef"
  v-model="content"
  autoresize
  :rows="1"
  maxlength="150"
  :maxrows="4"
  class="flex-grow"
  size="md"
  :ui="{
    base: 'w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors rounded-s-md'
  }"
  :loading="false"
/>

<UTextarea
  ref="textareaRef"
  v-model="content"
  autoresize
  :rows="1"
  maxlength="150"
  :maxrows="4"
  class="flex-grow"
  size="md"
  :ui="{
    base: 'w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors rounded-s-md'
  }"
  :loading="false"
/>

This will ensure only the left corners are rounded, as you are now fully controlling the base slot classes and not including the default rounded-md from the theme. You can see the default slot structure in the theme documentation for textarea components, which shows that rounded-md is part of the default base slot and must be replaced if you want custom rounding behavior Textarea Theme. Summary:
- The default rounded-md is still present unless you override the entire base slot. - Use :ui="{ base: '...' }" with your own classes and exclude rounded-md to get only the left corners rounded. If you want to keep all other default styles, you can copy them from the theme and just change the rounded-md to rounded-s-md as shown above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4mo ago

I did "rounded-e-none" to delete the rounded corners

Gaming

Programming

textarea round only left corners

Did you find this page helpful?