Component

Input

A soft field. The label rests on the text line, then rises once you focus or type.

Import jellyfy/input.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.

Classes

Class	Type
input	Component	The label that wraps the field.
input-sm	Size	Small size
input-md	Size	Medium size (default)
input-lg	Size	Large size
input-start	Part	An icon before the text. It centers on one line.
input-end	Part	An icon after the text.
primary	Color	Indigo by default.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Field

The placeholder is a single space. That is how the label knows the field is empty. The span is the label.

Name

<label class="input">
  <input placeholder=" ">
  <span>Name</span>
</label>

Colors

PrimarySecondaryTertiaryNeutralSuccessErrorWarningInfo

<label class="input primary">
  <input placeholder=" " value="Primary">
  <span>Primary</span>
</label>
<label class="input secondary">
  <input placeholder=" " value="Secondary">
  <span>Secondary</span>
</label>
<label class="input tertiary">
  <input placeholder=" " value="Tertiary">
  <span>Tertiary</span>
</label>
<label class="input neutral">
  <input placeholder=" " value="Neutral">
  <span>Neutral</span>
</label>
<label class="input success">
  <input placeholder=" " value="Success">
  <span>Success</span>
</label>
<label class="input error">
  <input placeholder=" " value="Error">
  <span>Error</span>
</label>
<label class="input warning">
  <input placeholder=" " value="Warning">
  <span>Warning</span>
</label>
<label class="input info">
  <input placeholder=" " value="Info">
  <span>Info</span>
</label>

Sizes

SmallMediumLarge

<label class="input input-sm">
  <input placeholder=" ">
  <span>Small</span>
</label>

Icons

The text and the label indent to clear the icons.

<label class="input">
  <span class="input-start" aria-hidden="true"><svg><!-- search --></svg></span>
  <input placeholder=" ">
  <span>Search</span>
  <span class="input-end" aria-hidden="true"><svg><!-- send --></svg></span>
</label>

With a message

Name

A short note.

<label class="input error">
  <input placeholder=" ">
  <span>Name</span>
</label>
<p class="message">A short note.</p>

With no color class, the field stays plain and the text is the plain content color. A slot uses the surface content color. While the field is empty and not focused, the label is large and dim, on the text line. Focus, or the first letter, shrinks it to a caption and the caret is already where the letters go.