import CodeRender from '../../CodeRender'

### Textarea

<CodeRender code={`
<textarea class="textarea" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea" placeholder="Bio"></textarea>

```
### Textarea with border

<CodeRender code={`
<textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>

```
### Ghost (no background)

<CodeRender code={`
<textarea class="textarea textarea-ghost" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-ghost" placeholder="Bio"></textarea>

```
### With form control and labels

<CodeRender code={`
<label class="form-control">
  <div class="label">
    <span class="label-text">Your bio</span>
    <span class="label-text-alt">Alt label</span>
  </div>
  <textarea class="textarea h-24 textarea-bordered" placeholder="Bio"></textarea>
  <div class="label">
    <span class="label-text-alt">Your bio</span>
    <span class="label-text-alt">Alt label</span>
  </div>
</label>

`} />
  
```html
<label class="form-control">
  <div class="label">
    <span class="label-text">Your bio</span>
    <span class="label-text-alt">Alt label</span>
  </div>
  <textarea class="textarea h-24 textarea-bordered" placeholder="Bio"></textarea>
  <div class="label">
    <span class="label-text-alt">Your bio</span>
    <span class="label-text-alt">Alt label</span>
  </div>
</label>

```
### Primary color

<CodeRender code={`
<textarea class="textarea textarea-primary" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-primary" placeholder="Bio"></textarea>

```
### Secondary color

<CodeRender code={`
<textarea class="textarea textarea-secondary" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-secondary" placeholder="Bio"></textarea>

```
### Accent color

<CodeRender code={`
<textarea class="textarea textarea-accent" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-accent" placeholder="Bio"></textarea>

```
### Info color

<CodeRender code={`
<textarea class="textarea textarea-info" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-info" placeholder="Bio"></textarea>

```
### Success color

<CodeRender code={`
<textarea class="textarea textarea-success" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-success" placeholder="Bio"></textarea>

```
### Warning color

<CodeRender code={`
<textarea class="textarea textarea-warning" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-warning" placeholder="Bio"></textarea>

```
### Error color

<CodeRender code={`
<textarea class="textarea textarea-error" placeholder="Bio"></textarea>

`} />
  
```html
<textarea class="textarea textarea-error" placeholder="Bio"></textarea>

```
### Sizes

<CodeRender code={`
<div class="flex flex-col gap-4 w-full items-center">
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-xs w-full max-w-xs"
  ></textarea>
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-sm w-full max-w-xs"
  ></textarea>
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-md w-full max-w-xs"
  ></textarea>
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-lg w-full max-w-xs"
  ></textarea>
</div>

`} />
  
```html
<div class="flex flex-col gap-4 w-full items-center">
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-xs w-full max-w-xs"
  ></textarea>
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-sm w-full max-w-xs"
  ></textarea>
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-md w-full max-w-xs"
  ></textarea>
  <textarea
    placeholder="Bio"
    class="textarea textarea-bordered textarea-lg w-full max-w-xs"
  ></textarea>
</div>

```
### Disabled

<CodeRender code={`
<textarea class="textarea" placeholder="Bio" disabled=""></textarea>

`} />
  
```html
<textarea class="textarea" placeholder="Bio" disabled=""></textarea>

```   

    