Form Control

🚧 WORK IN PROGRESS: Label positions and fieldset group options. 🚧

Class name	Type
`.prs-form-control`	Component	Container for <label>
`.prs-form-control-col`	Component	Column container for <label>
`.prs-label`	Part	Label styles
`.prs-label-alt`	Part	For use within the column container
`.prs-label-text`	Part	Label text styles
`.prs-label-text-alt`	Part	For use within the column container

Default

<div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label class="prs-form-control">
    <div class="prs-label">
      <span class="prs-label-text">Input label</span>
    </div>
    <input type="text" class="prs-input" placeholder="Input" />
  </label>
</div>

Alternate labels

<div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label class="prs-form-control">
    <div class="prs-label">
      <span class="prs-label-text">Input label</span>
      <span class="prs-label-text">Alt</span>
    </div>
    <input type="text" class="prs-input" placeholder="Input" />
    <div class="prs-label">
      <span class="prs-label-text">Alt</span>
      <span class="prs-label-text">Alt</span>
    </div>
  </label>
</div>

Checkbox

These require a little extra help, so we need a different approach.

<label class="prs-checkbox-label">
  <input type="checkbox" class="prs-checkbox" />
  <span class="prs-label-text">Checkbox label</span>
</label>

Radio

These require a little extra help, so we need a different approach.

<label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio" />
  <span class="prs-label-text">Radio label</span>
</label>
<label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio" />
  <span class="prs-label-text">Radio label</span>
</label>

Toggle

These require a little extra help, so we need a different approach.

<div class="grid-(& cols-1) gap-12"> <!-- <- this is just for demo purposes -->

  <label class="prs-toggle-label">
    <span class="prs-label-text">Toggle label</span>
    <input type="checkbox" class="prs-toggle" />
  </label>
  <label class="prs-toggle-label">
    <input type="checkbox" class="prs-toggle" />
    <span class="prs-label-text">Toggle label</span>
  </label>

</div>

Column

An alternative way to stack fields (responsive).

<div x-data="{ toggle: false, }" class="px-4 w-screen max-w-3xl grid-(& cols-1) gap-6 divide-(y gray-300) [&>*]:(pt-6)"> <!-- <- this is just for demo purposes -->

  <label class="prs-form-control-col">
    <div class="prs-label prs-label-alt">
      <span class="prs-label-text">Text Input Label</span>
      <span class="prs-label-text prs-label-text-alt">Some alternate label explanation or description. Use this when you have a lot to explain.</span>
    </div>
    <div class="prs-form-control">
      <!--
        You can add some optional labels too
        <span class="prs-label"><span class="prs-label-text">Optional</span><span class="prs-label-text">Optional</span></span>
      -->
      <input type="text" class="prs-input" placeholder="Text input placeholder" />
      <span class="prs-label"><span class="prs-label-text prs-label-error">Error message</span><span class="prs-label-text">Some more optional help</span></span>
    </div>
  </label>

  <label class="prs-form-control-col">
    <div class="prs-label prs-label-alt">
      <span class="prs-label-text">Toggle Input Label</span>
      <span class="prs-label-text prs-label-text-alt">Some alternate label explanation or description. Use this when you have a lot to explain.</span>
    </div>
    <div>
      <div class="prs-toggle-label">
        <input type="checkbox" class="prs-toggle" x-model="toggle" />
        <span class="prs-label-text" x-text="toggle ? 'On' : 'Off'"></span>
      </div>
    </div>
  </label>

  <label class="prs-form-control-col">
    <div class="prs-label prs-label-alt">
      <span class="prs-label-text">Textarea Label</span>
      <span class="prs-label-text prs-label-text-alt">Some alternate label explanation or description. Use this when you have a lot to explain.</span>
    </div>
    <div class="prs-form-control">
      <textarea class="prs-input" rows="4" placeholder="Textarea placeholder"></textarea>
    </div>
  </label>

</div>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-form-control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  > .prs-label-error {
    display: none;
  }

  &:has(:user-invalid) > .prs-label-error,
  &:has(.prs-input_invalid) > .prs-label-error {
    display: inherit;
  }
}

.prs-form-control-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  @media (min-width: 768px) {
    grid-template-columns: 33% 1fr;
  }
}

.prs-label {
  color: var(--prs-c-gray-600);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  user-select: none;

  &:where(.prs-label-alt) {
    color: currentColor;
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }
}

.prs-label-text {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.375rem;

  &:where(.prs-label-text-alt) {
    max-width: 30rem;
    color: var(--prs-c-gray-600);
    font-weight: normal;
    text-wrap: balance;
  }

  &:where(.prs-label-error) {
    color: var(--prs-c-danger-600);
  }
}

.prs-toggle-label {
  display: inline-flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;

  .prs-label-text {
    font-size: inherit;
  }

  &:has(.prs-toggle_disabled, [disabled]) {
    cursor: not-allowed;
  }
}

.prs-checkbox-label,
.prs-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;

  .prs-label-text {
    font-size: inherit;
  }

  &:has([disabled]) {
    cursor: not-allowed;

    .prs-label-text {
      color: var(--prs-c-gray-300);
    }
  }
}

Coming soon...