mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 17:16:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add search input use cases to form docs

Browse source
This commit is contained in:
Ömür Yanıkoğlu 2022-03-09 04:43:24 +03:00
parent 6d71b1d707
commit a1010ac854
1 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/src/forms.html
View file

@ -210,6 +210,36 @@
</footer>
</article>
<p>Search:</p>
<article aria-label="Search, Search valid, Search invalid">
<input type="search" id="search" name="search" placeholder="Search">
<input type="search" id="search" name="search" placeholder="Search valid" aria-invalid="false">
<input type="search" id="search" name="search" placeholder="Search invalid" aria-invalid="true">
<p>RTL:</p>
<div dir="rtl">
<input type="search" id="search" name="search" placeholder="Search">
<input type="search" id="search" name="search" placeholder="Search valid" aria-invalid="false">
<input type="search" id="search" name="search" placeholder="Search invalid" aria-invalid="true">
</div>
<footer class="code">
<pre><code><em>&lt;!-- Search --&gt;</em>
&lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
<em>&lt;!-- Search valid --&gt;</em>
&lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search valid&quot; aria-invalid=&quot;false&quot;&gt;
<em>&lt;!-- Search invalid --&gt;</em>
&lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search invalid&quot; aria-invalid=&quot;true&quot;&gt;
<em>&lt;!-- RTL --&gt;</em>
&lt;div dir=&quot;rtl&quot;&gt;
&lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
&lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search valid&quot; aria-invalid=&quot;false&quot;&gt;
&lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;Search invalid&quot; aria-invalid=&quot;true&quot;&gt;
&lt;/div&gt;
</footer>
</article>
<p>Others input types:</p>
<article aria-label="File browser, range slider, date, time, color examples">
<label for="file">File browser