🎉 daisyUI 5.0 升级指南

文本输入

文本输入是一个简单的输入字段。

类名		类型
input
组件
用于 <input type="text"> 标签或 <input type="text"> 标签的包装器
input-ghost
样式
幽灵样式
input-neutral
颜色
中性色
input-primary
颜色
原色
input-secondary
颜色
辅助色
input-accent
颜色
强调色
input-info
颜色
信息色
input-success
颜色
成功色
input-warning
颜色
警告色
input-error
颜色
错误色
input-xs
尺寸
超小尺寸
input-sm
尺寸
小尺寸
input-md
尺寸
中等尺寸[默认]
input-lg
尺寸
大尺寸
input-xl
尺寸
超大尺寸

文本输入

<input type="text" placeholder="Type here" class="$$input" />
<input type="text" placeholder="Type here" class="$$input" />

带有内部文本标签的文本输入

我们可以对父元素使用 input 类，并在其中放置任何内容
<label class="$$input">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
  <input type="search" class="grow" placeholder="Search" />
  <kbd class="$$kbd $$kbd-sm">⌘</kbd>
  <kbd class="$$kbd $$kbd-sm">K</kbd>
</label>
<label class="$$input">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></g></svg>
  <input type="text" class="grow" placeholder="index.php" />
</label>
<label class="$$input">
  Path
  <input type="text" class="grow" placeholder="src/app/" />
  <span class="$$badge $$badge-neutral $$badge-xs">Optional</span>
</label>
<label class="$$input">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
  <input type="search" class="grow" placeholder="Search" />
  <kbd class="$$kbd $$kbd-sm">⌘</kbd>
  <kbd class="$$kbd $$kbd-sm">K</kbd>
</label>
<label class="$$input">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></g></svg>
  <input type="text" class="grow" placeholder="index.php" />
</label>
<label class="$$input">
  Path
  <input type="text" class="grow" placeholder="src/app/" />
  <span class="$$badge $$badge-neutral $$badge-xs">Optional</span>
</label>

幽灵样式

<input type="text" placeholder="Type here" class="$$input $$input-ghost" />
<input type="text" placeholder="Type here" class="$$input $$input-ghost" />

带有 fieldset 和 fieldset-legend

你的名字是什么？

可选

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">What is your name?</legend>
  <input type="text" class="$$input" placeholder="Type here" />
  <p class="$$fieldset-label">Optional</p>
</fieldset>
<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">What is your name?</legend>
  <input type="text" class="$$input" placeholder="Type here" />
  <p class="$$fieldset-label">Optional</p>
</fieldset>

输入颜色

<input type="text" placeholder="neutral" class="$$input $$input-neutral" />
<input type="text" placeholder="Primary" class="$$input $$input-primary" />
<input type="text" placeholder="Secondary" class="$$input $$input-secondary" />
<input type="text" placeholder="Accent" class="$$input $$input-accent" />

<input type="text" placeholder="Info" class="$$input $$input-info" />
<input type="text" placeholder="Success" class="$$input $$input-success" />
<input type="text" placeholder="Warning" class="$$input $$input-warning" />
<input type="text" placeholder="Error" class="$$input $$input-error" />
<input type="text" placeholder="neutral" class="$$input $$input-neutral" />
<input type="text" placeholder="Primary" class="$$input $$input-primary" />
<input type="text" placeholder="Secondary" class="$$input $$input-secondary" />
<input type="text" placeholder="Accent" class="$$input $$input-accent" />

<input type="text" placeholder="Info" class="$$input $$input-info" />
<input type="text" placeholder="Success" class="$$input $$input-success" />
<input type="text" placeholder="Warning" class="$$input $$input-warning" />
<input type="text" placeholder="Error" class="$$input $$input-error" />

尺寸

<input type="text" placeholder="Xsmall" class="$$input $$input-xs" />
<input type="text" placeholder="Small" class="$$input $$input-sm" />
<input type="text" placeholder="Medium" class="$$input $$input-md" />
<input type="text" placeholder="Large" class="$$input $$input-lg" />
<input type="text" placeholder="Xlarge" class="$$input $$input-xl" />
<input type="text" placeholder="Xsmall" class="$$input $$input-xs" />
<input type="text" placeholder="Small" class="$$input $$input-sm" />
<input type="text" placeholder="Medium" class="$$input $$input-md" />
<input type="text" placeholder="Large" class="$$input $$input-lg" />
<input type="text" placeholder="Xlarge" class="$$input $$input-xl" />

禁用

<input type="text" placeholder="You can't touch this" class="$$input" disabled />
<input type="text" placeholder="You can't touch this" class="$$input" disabled />

输入类型

inputclass 可以用于任何输入字段类型。包括文本,密码,电子邮件,数字,日期,本地日期时间,周,月,电话,网址,搜索,时间

对于复选框,单选按钮,文件,范围请使用它们自己的类名，因为它们在视觉上不是输入字段。

输入框可以与验证器类一起使用以具有验证样式。请参阅验证器组件以了解更多详情。

带有数据列表建议的文本输入

<input type="text" class="$$input" placeholder="Which browser do you use" list="browsers"/>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Edge">
</datalist>
<input type="text" class="$$input" placeholder="Which browser do you use" list="browsers"/>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Edge">
</datalist>

日期输入

<input type="date" class="$$input"/>
<input type="date" class="$$input"/>

时间输入

<input type="time" class="$$input"/>
<input type="time" class="$$input"/>

本地日期时间输入

<input type="datetime-local" class="$$input"/>
<input type="datetime-local" class="$$input"/>

带有图标和验证器的用户名文本输入

必须为 3 到 30 个字符
仅包含字母、数字或破折号

<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
  <input type="input" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
</label>
<p class="$$validator-hint">
  Must be 3 to 30 characters
  <br/>containing only letters, numbers or dash
</p>
<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
  <input type="input" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
</label>
<p class="$$validator-hint">
  Must be 3 to 30 characters
  <br/>containing only letters, numbers or dash
</p>

带有图标的搜索输入

<label class="$$input">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
  <input type="search" required placeholder="Search"/>
</label>
<label class="$$input">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></g></svg>
  <input type="search" required placeholder="Search"/>
</label>

带有图标和验证器的电子邮件输入

<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
  <input type="email" placeholder="mail@site.com" required/>
</label>
<div class="$$validator-hint hidden">Enter valid email address</div>
<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
  <input type="email" placeholder="mail@site.com" required/>
</label>
<div class="$$validator-hint hidden">Enter valid email address</div>

带有图标、验证器、按钮、Join 的电子邮件输入

<div class="$$join">
  <div>
    <label class="$$input $$validator $$join-item">
      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
      <input type="email" placeholder="mail@site.com" required/>
    </label>
    <div class="$$validator-hint hidden">Enter valid email address</div>
  </div>
  <button class="$$btn $$btn-neutral $$join-item">Join</button>
</div>
<div class="$$join">
  <div>
    <label class="$$input $$validator $$join-item">
      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></g></svg>
      <input type="email" placeholder="mail@site.com" required/>
    </label>
    <div class="$$validator-hint hidden">Enter valid email address</div>
  </div>
  <button class="$$btn $$btn-neutral $$join-item">Join</button>
</div>

带有图标和验证器的密码输入

<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
  <input type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
</label>
<p class="$$validator-hint hidden">
  Must be more than 8 characters, including
  <br/>At least one number
  <br/>At least one lowercase letter
  <br/>At least one uppercase letter
</p>
<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
  <input type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
</label>
<p class="$$validator-hint hidden">
  Must be more than 8 characters, including
  <br/>At least one number
  <br/>At least one lowercase letter
  <br/>At least one uppercase letter
</p>

带有验证器的数字输入

必须介于 1 到 10 之间

<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" 
min="1" max="10" title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>
<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" 
min="1" max="10" title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>

带有图标和验证器的电话号码输入

必须为 10 位数字

<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M7.25 11.5C6.83579 11.5 6.5 11.8358 6.5 12.25C6.5 12.6642 6.83579 13 7.25 13H8.75C9.16421 13 9.5 12.6642 9.5 12.25C9.5 11.8358 9.16421 11.5 8.75 11.5H7.25Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.61929 1 3.5 2.11929 3.5 3.5V12.5C3.5 13.8807 4.61929 15 6 15H10C11.3807 15 12.5 13.8807 12.5 12.5V3.5C12.5 2.11929 11.3807 1 10 1H6ZM10 2.5H9.5V3C9.5 3.27614 9.27614 3.5 9 3.5H7C6.72386 3.5 6.5 3.27614 6.5 3V2.5H6C5.44771 2.5 5 2.94772 5 3.5V12.5C5 13.0523 5.44772 13.5 6 13.5H10C10.5523 13.5 11 13.0523 11 12.5V3.5C11 2.94772 10.5523 2.5 10 2.5Z" fill="currentColor"></path></g></svg>
  <input type="tel" class="tabular-nums" required placeholder="Phone" pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
</label>
<p class="$$validator-hint">Must be 10 digits</p>
<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M7.25 11.5C6.83579 11.5 6.5 11.8358 6.5 12.25C6.5 12.6642 6.83579 13 7.25 13H8.75C9.16421 13 9.5 12.6642 9.5 12.25C9.5 11.8358 9.16421 11.5 8.75 11.5H7.25Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.61929 1 3.5 2.11929 3.5 3.5V12.5C3.5 13.8807 4.61929 15 6 15H10C11.3807 15 12.5 13.8807 12.5 12.5V3.5C12.5 2.11929 11.3807 1 10 1H6ZM10 2.5H9.5V3C9.5 3.27614 9.27614 3.5 9 3.5H7C6.72386 3.5 6.5 3.27614 6.5 3V2.5H6C5.44771 2.5 5 2.94772 5 3.5V12.5C5 13.0523 5.44772 13.5 6 13.5H10C10.5523 13.5 11 13.0523 11 12.5V3.5C11 2.94772 10.5523 2.5 10 2.5Z" fill="currentColor"></path></g></svg>
  <input type="tel" class="tabular-nums" required placeholder="Phone" pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
</label>
<p class="$$validator-hint">Must be 10 digits</p>

带有图标和验证器的 URL

必须是有效的 URL

<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></g></svg>
  <input type="url" required placeholder="https://" value="https://" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$" title="Must be valid URL" />
</label>
<p class="$$validator-hint">Must be valid URL</p>
<label class="$$input $$validator">
  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></g></svg>
  <input type="url" required placeholder="https://" value="https://" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$" title="Must be valid URL" />
</label>
<p class="$$validator-hint">Must be valid URL</p>
您发现错误了吗？ 在 GitHub 上提交 issue
您喜欢 daisyUI 吗？ 发帖宣传一下！
支持 daisyUI 的开发： Open Collective
daisyUI store

NEXUS
官方 daisyUI 仪表板模板

可在 daisyUI 商店获取

更多详情
请升级您的浏览器