@workday/canvas-kit-css/form-field.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-form-field-label {
  box-sizing: border-box;
  font-weight: var(--cnvs-sys-font-weight-medium);
  color: var(--cnvs-sys-color-text-default);
  padding-inline-start: var(--cnvs-sys-space-zero);
  display: flex;
  align-items: center;
  min-width: 11.25rem;
}


.cnvs-form-field-label.is-required::after {
  content: "*";
  font-size: var(--cnvs-sys-font-size-body-large);
  font-weight: var(--cnvs-sys-font-weight-normal);
  color: var(--cnvs-brand-error-base);
  text-decoration: unset;
  margin-inline-start: var(--cnvs-sys-space-x1);
}


.cnvs-form-field-label.orientation-horizontal-start {
  justify-content: flex-start;
  float: left;
  max-height: var(--cnvs-sys-space-x10);
}


.cnvs-form-field-label.orientation-horizontal-end {
  max-height: var(--cnvs-sys-space-x10);
  float: left;
  justify-content: flex-end;
}


.cnvs-form-field-label.orientation-vertical {
  width: 100%;
}


.cnvs-form-field-label.is-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  height: 1px;
  min-height: 1px;
  width: 1px;
  min-width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}


.cnvs-form-field-hint {
  box-sizing: border-box;
  margin: var(--cnvs-sys-space-zero);
}


.cnvs-form-field-hint.error-error {
  color: var(--cnvs-brand-error-base);
}



.cnvs-form-field-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cnvs-sys-space-x2);
}


.cnvs-form-field {
  box-sizing: border-box;
  display: flex;
  border: none;
  padding: var(--cnvs-sys-space-zero);
  margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);
}


.cnvs-form-field.grow {
  width: 100%;
}

.cnvs-form-field.grow [data-width="ck-formfield-width"] {
  width: 100%;
}

.cnvs-form-field.grow:has(div[data-width="ck-formfield-width"]) {
  width: 100%;
}


.cnvs-form-field.orientation-horizontal-start {
  flex-direction: row;
  gap: var(--cnvs-sys-space-x8);
}


.cnvs-form-field.orientation-horizontal-end {
  flex-direction: row;
  gap: var(--cnvs-sys-space-x8);
}


.cnvs-form-field.orientation-vertical {
  flex-direction: column;
  gap: var(--cnvs-sys-space-x1);
  align-items: flex-start;
}





.cnvs-form-field-field {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cnvs-sys-space-x2);
}


.cnvs-form-field-group-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: var(--cnvs-sys-shape-x1);
  gap: var(--cnvs-sys-space-x2);
  padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
  margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
  transition: 100ms box-shadow;
  width: fit-content;
}


.cnvs-form-field-group-list.error-error {
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-error-base);
}


.cnvs-form-field-group-list.error-alert {
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest),inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);
}


.cnvs-form-field-group-label {
  box-sizing: border-box;
  font-weight: var(--cnvs-sys-font-weight-medium);
  color: var(--cnvs-sys-color-text-default);
  padding-inline-start: var(--cnvs-sys-space-zero);
  display: flex;
  align-items: center;
  min-width: 11.25rem;
}


.cnvs-form-field-group-label.is-required::after {
  content: "*";
  font-size: var(--cnvs-sys-font-size-body-large);
  font-weight: var(--cnvs-sys-font-weight-normal);
  color: var(--cnvs-brand-error-base);
  text-decoration: unset;
  margin-inline-start: var(--cnvs-sys-space-x1);
}


.cnvs-form-field-group-label.orientation-vertical {
  width: 100%;
}


.cnvs-form-field-group-label.orientation-horizontal-start {
  justify-content: flex-start;
  float: left;
  max-height: var(--cnvs-sys-space-x10);
}


.cnvs-form-field-group-label.orientation-horizontal-end {
  max-height: var(--cnvs-sys-space-x10);
  float: left;
  justify-content: flex-end;
}