Styling

Chirp Form provides multiple ways to customize the appearance of your forms and feeds using Shadow DOM with CSS parts and custom properties.

chirp-form

You can style the chirp-form element using CSS Parts or custom properties.

CSS Parts

Use the ::part() selector to style internal form elements:

chirp-form::part(form) {
  max-width: 500px;
  margin: 0 auto;
}

chirp-form::part(field) {
  margin-bottom: 1.5rem;
}

chirp-form::part(label) {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

chirp-form::part(input) {
  width: 100%;
  padding: .75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

chirp-form::part(button) {
  padding: .75rem 2rem;
  color: white;
  background: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

chirp-form::part(invalid) {
  color: #dc2626;
  font-size: .875rem;
  margin-top: .25rem;
}

Available parts for chirp-form:

• form - the form element
• field - field wrapper
• label - label element
• label-hint - inline label hint text
• input - input/textarea/select elements
• hint - field hint text below input
• invalid - validation error message
• buttons - button wrapper
• button - submit button

CSS Custom Properties

Override default styles using CSS custom properties:

// host
--host-display: block;
--host-font-family: inherit;

// form
--form-display: grid;
--form-gap: .5rem;

// field
--field-display: grid;
--field-gap: .025rem;

// label
--label-text-box-trim: trim-both;
--label-text-box-edge: cap alphabetic;
--label-font-size: inherit;
--label-font-weight: 500;
--label-color: inherit;

// label-hint
--label-hint-margin-inline-start: .25rem;
--label-hint-font-weight: 400;
--label-hint-font-size: .875em;
--label-hint-opacity: .7;

// input, input, textarea, select
--input-padding: .5rem;
--input-font-family: inherit;
--input-font-size: inherit;
--input-border: 1px solid #ccc;
--input-border-radius: .25rem;

// input:focus, input:focus, textarea:focus, select:focus
--input-focus-outline: 2px solid #000;
--input-focus-outline-offset: 2px;

// hint
--hint-font-size: .875em;
--hint-opacity: .7;

// buttons
--buttons-margin-top: .5rem;

// button
--button-padding: .375rem 1.25rem;
--button-font-size: inherit;
--button-font-weight: 400;
--button-color: #fff;
--button-background: #000;
--button-border: none;
--button-border-radius: 0.25rem;
--button-cursor: pointer;

// button:hover
--button-hover-background: #333;

// button:focus
--button-focus-outline: 2px solid #000;
--button-focus-outline-offset: 2px;

// input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]
--invalid-border-color: #dc2626;

// invalid
--invalid-margin-block-start: .125rem;
--invalid-font-size: .875em;
--invalid-color: #dc2626;

// invalid:empty
--invalid-empty-display: none;

chirp-feed

You can style the chirp-feed element in the same way as the chirp-form element.

CSS Parts

chirp-feed::part(submission) {
  padding: 1.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0 0 0 .1);
}

chirp-feed::part(label) {
  font-weight: 600;
  color: #374151;
}

chirp-feed::part(value) {
  color: #6b7280;
}

Available parts for chirp-feed:

• submission - individual submission wrapper
• content - submission content container
• label - field labels (dt elements)
• value - field values (dd elements)

CSS Custom Properties

chirp-feed {
// host
--host-display: grid;
--host-gap: 1rem;

// submission
--submission-padding: var(--submission-gap, 0);
--submission-list-style: none;
--submission-bg: transparent;
--submission-border: none;
--submission-border-radius: 0;

// content
--content-display: grid;
--content-gap: .25rem;
--content-margin: 0;

// label
--label-font-weight: 500);
--label-color: inherit;
--label-text-box-trim: trim-both;
--label-text-box-edge: cap alphabetic;

// value
--value-margin: 0;
--value-color: inherit;