mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
3ec44e54d2
## Problem - Grouped textareas render text too close to the top border. The standalone `Textarea` retains its normal top padding. - `InputGroupTextarea` has overridden the inner textarea with `py-0` since #44282 on 31 March 2026. The group initially supplied `py-2`; #44387 removed that outer padding later the same day, leaving no top spacing. The override was retained during the border and surface updates in #44690 and #48887. - The textarea component page had no grouped textarea example, so this difference was easy to miss. ## Solution - Give the grouped textarea `pt-2` while retaining `pb-0` for block-end addons. The outer group continues to own its border and focus styles. - Add a “With addon” example to the textarea component page to keep this composition visible. ## Review instructions - Open `/design-system/docs/components/textarea` and find “With addon”. Confirm its text has the same top inset as the default textarea and the block-end addon remains below the input. - Open `/design-system/docs/ui-patterns/forms` and find “Textarea Multi-line text input for longer content with addon”. Confirm the text has the same top inset as the standalone textarea example immediately above it. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a textarea example with a supporting addon below the text field, showing a 120-character limit. * **Bug Fixes** * Clicking a block-end addon now focuses its textarea as well as an input. * **Documentation** * Added the textarea-with-addon example to the textarea component documentation. * **Style** * Added top padding to textareas within input groups while keeping bottom padding unchanged, adjusting spacing above entered text. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
84 lines
1.5 KiB
Plaintext
84 lines
1.5 KiB
Plaintext
---
|
|
title: Textarea
|
|
description: Displays a form textarea or a component that looks like a textarea.
|
|
component: true
|
|
source:
|
|
shadcn: true
|
|
---
|
|
|
|
<ComponentPreview name="textarea-demo" peekCode wide />
|
|
|
|
## Installation
|
|
|
|
<Tabs defaultValue="cli">
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn-ui@latest add textarea
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="textarea" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
```
|
|
|
|
```tsx
|
|
<Textarea />
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<ComponentPreview name="textarea-demo" peekCode wide />
|
|
|
|
### Disabled
|
|
|
|
<ComponentPreview name="textarea-disabled" />
|
|
|
|
### With Label
|
|
|
|
<ComponentPreview name="textarea-with-label" className="[&_div.grid]:w-full" />
|
|
|
|
### With Text
|
|
|
|
<ComponentPreview name="textarea-with-text" />
|
|
|
|
### With Button
|
|
|
|
<ComponentPreview name="textarea-with-button" />
|
|
|
|
### With addon
|
|
|
|
An addon places supporting content inside the same bordered field as the textarea. Wrap `InputGroupTextarea` and `InputGroupAddon` in `InputGroup`, and use `align="block-end"` to place the addon below the text.
|
|
|
|
<ComponentPreview name="textarea-with-addon" />
|
|
|
|
### Form
|
|
|
|
<ComponentPreview name="textarea-form" />
|