-
-
-
-
-
-
-
Helen Walter
Admin
input & textarea
ADMIN PANELText Input
You can use input as code show bellow
Text Input color
You can use colored input by adding .input-(primary, secondary, success, warning, info, error) classes
With Form-control and Labels
You can use input as code show bellow
<div class="w-full max-w-xs form-control">
<label class="flex justify-between px-1 py-2 label">
<span class="label-text">What is your name?</span>
<span class="label-text-alt">Alt label</span>
</label>
<input type="text" placeholder="Type here" class="w-full max-w-xs bg-white border-none dark:bg-dark-dense input" />
<label class="flex justify-between px-1 py-2 label">
<span class="label-text-alt">Alt label</span>
<span class="label-text-alt">Alt label</span>
</label>
</div>
Text Input Different Size
You can use different size input by adding .input-(xs, sm, md, lg) classes
<!-- xs -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-primary input-bordered input-xs" />
<!-- sm -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-secondary input-bordered input-sm" />
<!-- md -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-success input-bordered input-md" />
<!-- lg -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-warning input-bordered input-lg" />
Textarea
You can use textarea by adding
Textarea With Border
You can use textarea bordered by adding .textarea-bordered classes
Textarea Different colors
You can use different colors textarea by adding .textarea-(xs, sm, md, lg) classes
With Form Control and Labels
You can use textarea as code show bellow
<div class="form-control">
<label class="label">
<span class="label-text">Your bio</span>
<span class="label-text-alt">Alt label</span>
</label>
<textarea class="h-24 bg-white dark:bg-dark-dense textarea textarea-bordered" placeholder="Bio"></textarea>
<label class="label">
<span class="label-text-alt">Your bio</span>
<span class="label-text-alt">Alt label</span>
</label>
</div>


