Form Elements (stable)


Error Messages
Formatted Text BlocksPre
First line of text.
Second Line.

Fourth line (after empty line).          Continuing after many spaces.
And: 
    Indented text.
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.

Multiline Code
async function greet({x: string}){
    console.log("Hello, " + x);
}
Multiline Sample Output
Fetching user data from the server.
Fetching product data from the server.
DONE
Multiline Sample Error Output
ERROR: something went wrong.
Failed to fetch the user data.
Please try again later.
Multiline Sample Warning Output
WARNING: Feature is deprecated.
try using this other one as an alternative.

Expandable Section
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 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.

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 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.

Show code
def someFunction():
    x = 45;
    print("hello");
  
Expandable with arrow on right side
I am expandable with arrow on right

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 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 arrow on right and slightly longer summary

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 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.

Expandable with arrow on right edge
I am expandable with arrow on right edge

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 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.

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 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 arrow on right edge and slightly longer summary

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 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.

Expandable blocks
I am expandable with arrow on right edge
hahahaha a aa

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 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.

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 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 arrow on right edge and slightly longer summary

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 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 code expanded content
def someFunction():
  x = 45;
  print("hello");

Ordered ListsSome text here before the list
  1. Item 1
  2. Item 2
  3. 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
  4. Item 4
Ordered Lists (with parent numbers)Some text here before the list
  1. Item 1
  2. Item 2
  3. 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
  4. Item 3
Ordered Lists (with parent numbers, and numbers in pills)Some text here before the list
  1. Item 1
  2. Item 2
  3. 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
  4. Item 3
Unordered ListsSome 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
Description Lists
Some term
Definition 1
Definition 2
Some Other term
Some definition

Accordion FAQTODO

Text/Number Inputs
Pill Groups
Do Something
Min Max
Num Users

Pill Groups with Range Sliders
Proportion
Proportion
Proportion
Proportion

Date/Time
TextAreas

Regular paragraph text here for comparison.


Checkboxes
Favorite Desserts
Favorite Desserts

Radio Buttons, and Fieldsets
Favorite Dessert (within fieldset)
Favorite Dessert (within seamless fieldset)
Favorite Dessert
Favorite Dessert

Inline Labels
Pill labels
Pill labels

Used when you want the label + input element pair to appear together

on same line as a beautiful coherent pill.

Just wrap a label element around the input field you want to to 
label.
AND:
  - Set the first child of the label to be a span element.

OPTIONAL: Set a width for the label, to get consistent alignment of
          the labels, e.g. `className="w-42"`.

Pill labels are used when you want the label + input element pair to appear together on same line as a beautiful coherent pill.


Newline labels
Select Dropdown Widget
Dropdown + Single Select (implicit)
Dropdown + Single Select Mode (explicit size)Dropdown + Multiple Select Mode (explicit size and multiple attribute)
List Selection + Single Select Mode (explicit size attribute)
List Selection + Multiple Select Mode (explicit multiple, no size attribute)List Selection + Multiple Select Mode (explicit size attribute and multiple attribute)
Favorite Dessert

Misc Fieldsets
Some Fieldset

File Selection
Profile Image

Misc
Form Input Buttons

Regular Buttons