Form Control

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

Class name Type
.prs-form-control Component Container for <label>
.prs-label Part Label styles
.prs-label-text Part Label text styles

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

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-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;
}

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

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

.prs-toggle-label {
  display: 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...