<pre class="shiki " style="background-color: #fff" tabindex="0"><code>&quot;use client&quot;

import * as React from &quot;react&quot;

import { Field } from &quot;@/components/ui/field&quot;
import { Input } from &quot;@/components/ui/input&quot;
import { Label } from &quot;@/components/ui/label&quot;

export default function InputTextType() {
 return (
 &lt;div className=&quot;flex flex-col gap-4&quot;&gt;
 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_text&quot;&gt;Text&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_text&quot; type=&quot;text&quot; placeholder=&quot;text&quot; /&gt;
 &lt;/Field&gt;

 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_number&quot;&gt;Number&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_number&quot; type=&quot;number&quot; placeholder=&quot;number&quot; /&gt;
 &lt;/Field&gt;

 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_tel&quot;&gt;Tel&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_tel&quot; type=&quot;tel&quot; placeholder=&quot;tel&quot; /&gt;
 &lt;/Field&gt;

 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_email&quot;&gt;Mail&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_email&quot; type=&quot;email&quot; placeholder=&quot;email&quot; /&gt;
 &lt;/Field&gt;

 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_url&quot;&gt;URL&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_url&quot; type=&quot;url&quot; placeholder=&quot;url&quot; /&gt;
 &lt;/Field&gt;

 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_password&quot;&gt;Password&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_password&quot; type=&quot;password&quot; placeholder=&quot;password&quot; /&gt;
 &lt;/Field&gt;

 &lt;Field&gt;
 &lt;Label htmlFor=&quot;ipt_type_search&quot;&gt;Search&lt;/Label&gt;
 &lt;Input id=&quot;ipt_type_search&quot; type=&quot;search&quot; placeholder=&quot;search&quot; /&gt;
 &lt;/Field&gt;
 &lt;/div&gt;
 )
}
</code></pre>

Input

Installation

Usage

API

Examples

Text Type

Date Type

File

Disabled

Read Only

With Label

With Button

Form