Element Snippets (dynamic)

Formatted Inline Text Blocks

Preformatted text block using <pre> tag

First line of text.
Second Line.

Fourth line (after empty line).          Continuing after many spaces.
And: 
    Indented text.
        Sub indentation.
back to baseline indentation.

Show code

<pre>
First line of text.
Second Line.

Fourth line (after empty line).          Continuing after many spaces.
And: 
    Indented text.
        Sub indentation.
back to baseline indentation.
</pre>

Inline Code, keyboard input, variables, sample output

Some regular text with inline code console.log("Some Code") mixed in. And variable someVar. And a keyboard input Ctrl + K. Some sample output SUCCESS: script completed., and a sample error ERROR: script failed, and a sample warning WARN: deprecated.

Show code

<p>
  Some regular text with inline code <code>console.log("Some Code")</code> mixed in. 
  And variable <var>someVar</var>. And a keyboard input <kbd>Ctrl + K</kbd>. 
  Some sample output <samp>SUCCESS: script completed.</samp>, 
  and a sample error <samp class="error">ERROR: script failed</samp>, 
  and a sample warning <samp class="warn">WARN: deprecated</samp>. 
</p>

Formatted Multiline Text Blocks

Code block with <pre><code> tags


async function greet({x: string}){
  console.log("Hello, " + x);
}

Show code

<pre><code>
async function greet({x: string}){
  console.log("Hello, " + x);
}
</code></pre>

Sample output (e.g. for output of a console log) using <pre><samp> tags


Fetching user data from the server.
Fetching product data from the server.
DONE

Show code

<pre><samp>
Fetching user data from the server.
Fetching product data from the server.
DONE
</samp></pre>

Multiline Sample Error Output using <pre class="error"><samp> tags


ERROR: something went wrong.
Failed to fetch the user data.
Please try again later.

Show code

<pre class="error">
<samp>
ERROR: something went wrong.
Failed to fetch the user data.
Please try again later.
</samp>
</pre>

Multiline Sample Warning Output using <pre class="warn"><samp> tags


WARNING: Feature is deprecated.
try using this other one as an alternative.

Show code

<pre class="warn">
<samp>
WARNING: Feature is deprecated.
try using this other one as an alternative.
</samp>
</pre>

Expandable Sections

Expandable sections (using <details><summary> tags)

I am expandable

I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s jfdlfj f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f. lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.

I am expandable, with a summary section that is actuall quite long, and is likely to span many lines. Here is more text to make it longer and longer and longer, hopefully wrapping many lines by now.

Expandable with a pre + code element expanded


def someFunction():
    x = 45;
    print("hello");

Show code

<details>
  <summary>I am expandable</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>

<details>
  <summary>I am expandable, with a summary section that is actuall quite long, and is likely to span many lines. Here is more text to make it longer and longer and longer, hopefully wrapping many lines by now.</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>

<details>
    <summary>Expandable with a pre + code element expanded</summary>
    <div>
      <pre><code>
def someFunction():
    x = 45;
    print("hello");
      </code></pre>
    </div>
</details>

Expandable with arrow on right side (using <details class="right"><summary> tags)

I am expandable with arrow on right

I am expandable with arrow on right and slightly longer summary

Show code

<details class="right">
  <summary>I am expandable with arrow on right</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>
<details class="right">
  <summary>I am expandable with arrow on right and slightly longer summary</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>

Expandable with arrow on right edge (using <details class="right-edge"><summary> tags)

I am expandable with arrow on right edge

I am expandable, with a summary section that is actuall quite long, and is likely to span many lines. Here is more text to make it longer and longer and longer, hopefully wrapping many lines by now.

I am expandable with arrow on right edge and slightly longer summary

Show code

<details class="right-edge">
  <summary>I am expandable with arrow on right edge</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>
<details class="right-edge">
  <summary>I am expandable, with a summary section that is actuall quite long, and is likely to span many lines. Here is more text to make it longer and longer and longer, hopefully wrapping many lines by now.</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>
<details class="right-edge">
  <summary>I am expandable with arrow on right edge  and slightly longer summary</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>

Expandable blocks (using <details class="right-edge block"><summary> tags)

I am expandable with arrow on right edge

hahahaha a aa

I am expandable, with a summary section that is actuall quite long, and is likely to span many lines. Here is more text to make it longer and longer and longer, hopefully wrapping many lines by now.

I am expandable with arrow on right edge and slightly longer summary

I am expandable with code expanded content


def someFunction():
    x = 45;
    print("hello");

Show code

<details class="right-edge block">
  <summary>I am expandable with arrow on right edge</summary>
  <div>
    hahahaha a aa 
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>
<details class="right-edge block">
  <summary>I am expandable, with a summary section that is actuall quite long, and is likely to span many lines. Here is more text to make it longer and longer and longer, hopefully wrapping many lines by now.</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>
<details class="right-edge block">
  <summary>I am expandable with arrow on right edge  and slightly longer summary</summary>
  <div>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
    <p>
      I am an expanded paragraph. lalala lalsdjsd dsljflsk dslf dslkfdslf 
      slf slfjs lfksjdf lskdf dslfjds lf jdsfldsk fdsf. js sdlfjsdflsjdf s 
      jfdlfj  f ffjfdsljf sfds ds jfdsl fds jfdslk jfsalfjds fsd fsfs fs f.
      lksjf sl sf slfkj sdfljsdfls kflsa f sfs kfsl fdsa.
    </p>
  </div>
</details>
<details class="right-edge block">
  <summary>I am expandable with code expanded content</summary>
    <pre><code>
def someFunction():
    x = 45;
    print("hello");
    </code></pre>
</details>

Ordered Lists

Ordered Lists (using <ol><li> tags)

Some text here before the list

Item 1
Item 2
Item 3
1. Item 3.1
2. Item 3.2
  1. Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.
  2. Item 3.2.2
  3. Item 3.2.3
3. Item 3.3
Item 4

Show code

Some text here before the list
<ol type="1" start={10} >
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ol type="i">
      <li>Item 3.1</li>
      <li>
        Item 3.2
        <ol type="a">
          <li>Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.</li>
          <li>Item 3.2.2</li>
          <li>Item 3.2.3</li>
        </ol>
      </li>
      <li>Item 3.3</li>
    </ol>
  </li>
  <li>Item 4</li>
</ol>

Ordered Lists (with parent numbers) (using <ol class="nested-numbers"><li> tags)

Some text here before the list

Item 1
Item 2
Item 3
1. Item 3.1 hhh
2. Item 3.2
  1. Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.
  2. Item 3.2.2
  3. Item 3.2.3
  4. Item 3.2.4
  5. Item 3.2.5
  6. Item 3.2.6
  7. Item 3.2.7
  8. Item 3.2.8
  9. Item 3.2.9
  10. Item 3.2.10
  11. Item 3.2.11
3. Item 3.3
Item 4

Show code

Some text here before the list
<ol class="nested-numbers" type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ol type="i">
      <li>Item 3.1 hhh</li>
      <li>Item 3.2
        <ol type="a">
          <li>Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.</li>
          <li>Item 3.2.2</li>
          <li>Item 3.2.3</li>
          <li>Item 3.2.4</li>
          <li>Item 3.2.5</li>
          <li>Item 3.2.6</li>
          <li>Item 3.2.7</li>
          <li>Item 3.2.8</li>
          <li>Item 3.2.9</li>
          <li>Item 3.2.10</li>
          <li>Item 3.2.11</li>
        </ol>
      </li>
      <li>Item 3.3</li>
    </ol>
  </li>
  <li>Item 4</li>
</ol>

Ordered Lists (with parent numbers, and numbers in pills) (using <ol class="nested-numbers number-pills"><li> tags)

Some text here before the list

Item 1
Item 2
Item 3
1. Item 3.1
2. Item 3.2
  1. Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.
  2. Item 3.2.2
  3. Item 3.2.3
  4. Item 3.2.4
  5. Item 3.2.5
  6. Item 3.2.6
  7. Item 3.2.7
  8. Item 3.2.8
  9. Item 3.2.9
  10. Item 3.2.10
  11. Item 3.2.11
3. Item 3.3
Item 4

Show code

Some text here before the list
<ol class="nested-numbers number-pills" type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ol type="i">
      <li>Item 3.1</li>
      <li>Item 3.2
        <ol type="a">
          <li>Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.</li>
          <li>Item 3.2.2</li>
          <li>Item 3.2.3</li>
          <li>Item 3.2.4</li>
          <li>Item 3.2.5</li>
          <li>Item 3.2.6</li>
          <li>Item 3.2.7</li>
          <li>Item 3.2.8</li>
          <li>Item 3.2.9</li>
          <li>Item 3.2.10</li>
          <li>Item 3.2.11</li>
        </ol>
      </li>
      <li>Item 3.3</li>
    </ol>
  </li>
  <li>Item 4</li>
</ol>

Unordered Lists

Unordered Lists (using <ul><li> tags) (NOTE: can use classes like "caret" to set bullet type)

Some text here before the list

Item 1
Item 2
Item 3
- Item 3.1
- Item 3.2
  - Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.
  - Item 3.2.2
  - Item 3.2.3
- Item 3.3
Item 4

Show code

NOTE: how it inherits the bullet type from the parent list. If we set bullet to be caret, then its sub list items will also be carets by default.

Some text here before the list
<ul class="">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul class="caret">
      <li>Item 3.1</li>
      <li>Item 3.2
        <ul>
          <li>Item 3.2.1. With some aditional text that oes on for a bit longer. Actually it goes on for even more just to test how it looks like when the text will need to wrap around to multiple lines. Perhaps some adititional content to make it even longer.</li>
          <li>Item 3.2.2</li>
          <li>Item 3.2.3</li>
        </ul>
      </li>
      <li>Item 3.3</li>
    </ul>
  </li>
  <li>Item 4</li>
</ul>

Unordered lists with various bullet types (using <ul class="XXX"><li> tags)

circle

Item 1
Item 2
Item 3

disc

Item 1
Item 2
Item 3

square

Item 1
Item 2
Item 3

square-outline

Item 1
Item 2
Item 3

chevron-circle

Item 1
Item 2
Item 3

chevron

Item 1
Item 2
Item 3

caret

Item 1
Item 2
Item 3

star

Item 1
Item 2
Item 3

Show code


// The following classes are available.
circle
disc
square
square-outline
chevron-circle
chevron
caret
star

<code>circle</code>
<ul class="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<code>disc</code>
<ul class="disc">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<code>square</code>
<ul class="square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<code>square-outline</code>
<ul class="square-outline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<code>chevron-circle</code>
<ul class="chevron-circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<code>chevron</code>
<ul class="chevron">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<code>caret</code>
<ul class="caret">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
    
<code>star</code>
<ul class="star">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Description Lists

Description Lists (using <dl><dt><dd> tags)

Some term: Definition 1; Definition 2
Some Other term: Some definition

Show code

<dl>
  <dt>Some term</dt>
  <dd>Definition 1</dd>
  <dd>Definition 2</dd>
  <dt>Some Other term</dt>
  <dd>Some definition</dd>
</dl>

FORM: Text/Number/Date Inputs

Text/Number Inputs (using <input type="XXX" /> tags)

Show code

<div class="vstack gap-y-2">
<input type="number" id="userNumber" min="0" defaultValue="0" />
<input type="text" placeholder='Some Text' />
  <input type="text" placeholder='Some required Text' required={true} />
  <input type="text" placeholder='Some disabled Text' disabled={true} />
  <input type="search" placeholder='Some Search' />
  <input type="password" placeholder='Password' />
  <input type="email" placeholder='Some Email' />
  <input type="url" placeholder='Some URL' />
  <input type="tel" placeholder='Mobile Number' pattern='[0-9]{10}' />
</div>

Date/Time inputs

Show code

<div class="vstack gap-y-2">
  <input type="date" placeholder='Some Date' />
  <input type="time" placeholder='Some Time' />
  <input type="datetime-local" placeholder='Some DateTime' />
  <input type="month" placeholder='Some Month' />
  <input type="week" placeholder='Some Week' />
</div>

FORM: Text Areas

Text Areas

Read Only text area (and no resize option)

Show code

    <div class="vstack gap-y-2">
      <textarea name="textArea1" rows="3" style="resize: vertical;" placeholder="Some Textarea Placeholder"></textarea>

      <textarea name="textArea2" rows="3" style="resize: vertical;" 
        defaultValue="Default Text" 
      >Textarea with text already in it.</textarea>

      <!-- Autoexpand Text Area-->
      <textarea name="textArea6" class="autoexpand" style="minHeight: 7em;" 
        defaultValue="Default Text" 
      >Text Area that expands to fit the contents (using class="autoexpand").</textarea>

      <!-- Readonly Text Area-->
      <textarea name="textArea3" rows="3" style="resize: none" readOnly 
      >Read Only text area (and no resize option)</textarea>

      <textarea name="textArea4" rows="10" style="resize: vertical" wrap="off">
Text Area with no wrap, and rows defined.


Some long text. lalal lalalal. lalall allalsjfsjfflks fsjds fdslkjf dskfjsadlfjsalfd sjdlfjsd fdsa fsdf sdf sadfjsa fsdal fsd flsadjfsdfljdsfais dfsdjfdsfs.
      </textarea>
    </div>


// NOTE: For REACT/Astro, you can use the following
//       for default text.
<textarea name="textArea2" rows="3" style="resize: vertical;" 
  defaultValue="Textarea with text already in it." 
></textarea>

Seamless Text Area that looks like regular text, but is editable (using <textarea class="seamless"> )

Regular paragraph text here for comparison.

Show code

<div class="vstack gap-y-2">
  <p>Regular paragraph text here for comparison.</p>
  <textarea name="textArea5" class="seamless" 
  >Now this is actual editable textarea. Note how it seamlessly blends in with normal looking text from its surroundings.</textarea>  
  </div>

Seamless Transition Text Area that looks like regular text, but becomes visible editable when focused (using <textarea class="seamless-transition"> )

Regular paragraph text here for comparison.

Show code

<div class="vstack gap-y-2">
  <p>Regular paragraph text here for comparison.</p>

  <textarea name="textArea7" class="seamless seamless-transition p-4 rounded-[1rem]"
  >Editable textarea that transitions from seamless text to visually obvious editable textarea when focused.</textarea>
    
</div>

FORM: Pill Groups

Pill Groups.
Pill groups are a nice way to bundle up deeply intertwined input fields together in a visually pleasing way.

e.g. label + value input + button.
e.g. label + min + max + button
e.g. min + desired + max + button
e.g. label + value input + decrease button + increase button

Using <fieldset class="pill-group">

Do Something

Min Max

Num Users

Show code

//Pattern
<fieldset class="pill-group">
  // Add form elements here.
</fieldset>

<div class="vstack gap-y-2">
  <fieldset class="pill-group">
    <legend><span class="w-36">Do Something</span></legend>
    <input type="number" id="numUsersInput" min="0" defaultValue="0" />
    <button onclick="makeButtonBusy(event)"><i class="fa-solid fa-caret-right"></i></button>
  </fieldset>
  <fieldset class="pill-group">
    <legend><span class="w-36">Min Max</span></legend>
    <input type="number" id="minValInput" min="0" defaultValue="0" />
    <i class="separator"></i>
    <input type="number" id="maxValInput" min="1" defaultValue="1" />
    <button onclick="makeButtonBusy(event)"><i class="fa-solid fa-caret-right"></i></button>
  </fieldset>
  <fieldset class="pill-group w-full">
    <legend><span class="w-36">Num Users</span></legend>
    <input type="number" id="numUsersInput" min="0" defaultValue="0" />
  </fieldset>
  <fieldset class="pill-group">
    <input type="number" id="numUsersInput" min="0" defaultValue="0" />
    <button onclick="makeButtonBusy(event)"><i class="fa-solid fa-caret-right"></i></button>
  </fieldset>
</div>


// NOTE: For a react element, you could use something like this for the 
//       button state.
<button 
  class={`${isBusy ? "busy" : ""}`} 
  onClick={actBusy} 
  disabled={isBusy}
>
  <i class="fa-solid fa-caret-right"></i>
</button>

Pill Groups with Range Sliders

NOTE: range sliders within a pill group make use of a custom input-bg container, this helps in the following ways:

The slider itself cannot expand height.
The range slider does not pay attention to some of the flexbox properties, and does not center itself vertically.
This input-bg container ads a background color to make the the slider stand out.

Proportion

Show code

<div class="vstack gap-y-2">

  <fieldset class="pill-group">
    <legend><span class="w-36">Proportion</span></legend>
    <div class="input-bg px-4">
      <input class="w-full" type="range" min={100} max={200} step={1} />
    </div>
  </fieldset>

  <fieldset class="pill-group">
    <legend><span class="w-36">Proportion</span></legend>
    <div class="input-bg px-4">
      <input class="w-full" type="range" min={100} max={200} step={1} />
    </div>
    <button onclick="makeButtonBusy(event)"><i class="fa-solid fa-caret-right"></i></button>
  </fieldset>

  <fieldset class="pill-group">
    <legend><span class="w-36">Proportion</span></legend>
    <input type="number" id="numUsersInput" min="0" defaultValue="0" />
    <div class="input-bg px-4">
      <input class="w-full" type="range" min={100} max={200} step={1} />
    </div>
    <button onclick="makeButtonBusy(event)"><i class="fa-solid fa-caret-right"></i></button>
  </fieldset>

  <fieldset class="pill-group">
    <legend><span class="w-36">Proportion</span></legend>
    <div class="input-bg px-4">
      <input class="w-full" type="range" min={100} max={200} step={1} />
    </div>
  </fieldset>

</div>

FORM: Checkboxes

Regular Checkboxes (using <input type="checkbox" /> )

Show code

<input type="checkbox" name="check1" />

Checkbox with option label (using <label><input type="checkbox" />Label text</label> )

Some Checkbox Label Some Checkbox Label 2 Some Checkbox Label 3

Show code

<div class="vstack gap-y-2">

  <label>
    <input type="checkbox" name="check2" />
    Some Checkbox Label
  </label>

  <label>
    <input type="checkbox" name="check3" />
    Some Checkbox Label 2
  </label>

  <label>
    <input type="checkbox" name="check4" />
    Some Checkbox Label 3
  </label>
    
</div>

Check boxes as a pill-group selection widget.

With a separate pill segment for each checkbox option.

Using <fieldset class="pill-select"> XXX LABELLED CHECKBOXES XXX </fieldselect>

NOTE: You can select multiple options at once.

Show code

<div class="vstack gap-y-2">

  <!--
  // Check boxes as a pill-group selection widget.
  // With a separate pill segment for each checkbox option.
  -->
  <fieldset class="pill-select">
    <label><input type="checkbox" name='check1a' />Jelly</label>
    <label><input type="checkbox" name='check1b' />Ice Cream</label>
    <label><input type="checkbox" name='check1c' />Flan</label> 
  </fieldset>


  <!--
  // Check boxes as a pill-group selection widget.
  // With a separate pill segment for each checkbox option.
  // And an overall label appearing above the pills widget.
  -->
  <fieldset class="seamless">
    <legend><span>Favorite Desserts</span></legend>
    <fieldset class="pill-select">
      <label><input type="checkbox" name='check2a' />Jellyee</label>
      <label><input type="checkbox" name='check2b' />Ice Cream</label>
      <label><input type="checkbox" name='check2c' />Flan</label> 
    </fieldset>
  </fieldset>


  <!-- 
  // Check boxes as a pill-group selection widget.
  // With a separate pill segment for each checkbox option.
  // And an overall label appearing inline, as first portion of the pill.
  // NOTE: the class="w-48" for the overall labels is optional,
  //       but it allows consistent alignment of the group labels.
  -->
  <fieldset class="pill-select">
    <legend><span class="w-48">Favorite Desserts</span></legend>
    <label><input type="checkbox" name='check3a' />Jelly</label>
    <label><input type="checkbox" name='check3b' />Ice Cream</label>
    <label><input type="checkbox" name='check3c' />Flan</label> 
  </fieldset>
</div>

Show code