### Radio Button Component HTML Examples

Source: https://designsystem.nyc.gov/components/radio-button

Provides HTML code examples for various states of the radio button component, including default, checked, disabled, and a combination of disabled and checked. These examples demonstrate how to structure radio buttons within a label and use the 'nyc-field' class for styling.

```html
<div class="code-examples">

  <div class="nyc-field">
    <legend>Default</legend>
    <label>
      <input type="radio" name="radio-default"/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Checked</legend>
    <label>
      <input type="radio" name="radio-checked" checked/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Disabled</legend>
    <label>
      <input type="radio" name="radio-disabled" disabled/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Disabled&Checked</legend>
    <label>
      <input type="radio" name="radio-disabled-checked" disabled checked/> Label
    </label>
  </div>
    
</div>
```

--------------------------------

### HTML Combo-box Component - Disabled Example

Source: https://designsystem.nyc.gov/components/combo-box

This example illustrates a disabled combo-box component. While the HTML structure is similar to the default, it implies that the component will be non-interactive. Specific implementation details for disabling might vary and are not fully shown in this snippet.

```html
<div class="nyc-field">
  <label for="example-disabled-combo-box">Disabled Dropdown Label</label>
  <span class="subtitle">Subtitle text</span>
  <nyc-combo-box id="example-disabled-combo-box" disabled>
    <option value="disabled">-- Disabled --</option>
  </nyc-combo-box>
</div>
```

--------------------------------

### HTML Combo-box Component - Default Example

Source: https://designsystem.nyc.gov/components/combo-box

This example demonstrates the basic structure of the combo-box component with a label, subtitle, and a list of options. It is contained within a div with the 'nyc-field' class. The '<nyc-combo-box>' element requires an 'id' attribute and 'option' elements with 'value' attributes.

```html
<div class="nyc-field">
  <label for="example-default-combo-box">Default Dropdown Label</label>
  <span class="subtitle">Subtitle text</span>
  <nyc-combo-box id="example-default-combo-box">
    <option value="alabama">Alabama</option>
    <option value="alaska">Alaska</option>
    <option value="arizona">Arizona</option>
    <option value="arkansas">Arkansas</option>
    <option value="california">California</option>
    <option value="colorado">Colorado</option>
    <option value="connecticut">Connecticut</option>
    <option value="delaware">Delaware</option>
    <option value="florida">Florida</option>
    <option value="georgia">Georgia</option>
    <option value="hawaii">Hawaii</option>
    <option value="idaho">Idaho</option>
    <option value="illinois">Illinois</option>
    <option value="indiana">Indiana</option>
    <option value="iowa">Iowa</option>
    <option value="kansas">Kansas</option>
    <option value="kentucky">Kentucky</option>
    <option value="louisiana">Louisiana</option>
    <option value="maine">Maine</option>
    <option value="maryland">Maryland</option>
    <option value="massachusetts">Massachusetts</option>
    <option value="michigan">Michigan</option>
    <option value="minnesota">Minnesota</option>
    <option value="mississippi">Mississippi</option>
    <option value="missouri">Missouri</option>
    <option value="montana">Montana</option>
    <option value="nebraska">Nebraska</option>
    <option value="nevada">Nevada</option>
    <option value="new_hampshire">New Hampshire</option>
    <option value="new_jersey">New Jersey</option>
    <option value="new_mexico">New Mexico</option>
    <option value="new_york">New York</option>
    <option value="north_carolina">North Carolina</option>
    <option value="north_dakota">North Dakota</option>
    <option value="ohio">Ohio</option>
    <option value="oklahoma">Oklahoma</option>
    <option value="oregon">Oregon</option>
    <option value="pennsylvania">Pennsylvania</option>
    <option value="rhode_island">Rhode Island</option>
    <option value="south_carolina">South Carolina</option>
    <option value="south_dakota">South Dakota</option>
    <option value="tennessee">Tennessee</option>
    <option value="texas">Texas</option>
    <option value="utah">Utah</option>
    <option value="vermont">Vermont</option>
    <option value="virginia">Virginia</option>
    <option value="washington">Washington</option>
    <option value="west_virginia">West Virginia</option>
    <option value="wisconsin">Wisconsin</option>
    <option value="wyoming">Wyoming</option>
  </nyc-combo-box>
</div>
```

--------------------------------

### Radio Button Group: Default Example (HTML)

Source: https://designsystem.nyc.gov/components/radio-button

Demonstrates a basic radio button group with a legend and multiple label options. This serves as a foundational example for implementing radio button selections.

```html
<div class="nyc-field">
  <legend>Default</legend>
  <span class="subtitle">Subtitle text</span>
  <label>
    <input type="radio" name="default-group"/> Label 1
  </label>
  <label>
    <input type="radio" name="default-group"/> Label 2
  </label>
  <label>
    <input type="radio" name="default-group"/> Label 3
  </label>
</div>
```

--------------------------------

### Instantiate Calendar Custom Element

Source: https://designsystem.nyc.gov/components/calendar

This code demonstrates how to instantiate the `nyc-calendar` custom element to display a calendar interface. This is a basic usage example and assumes the custom element is registered and available.

```html
<nyc-calendar></nyc-calendar>
```

--------------------------------

### Checkbox Button Examples (HTML)

Source: https://designsystem.nyc.gov/components/checkbox-button

Provides HTML examples for checkbox buttons in various states: default, disabled, and disabled checked. These components feature a label that acts as the clickable surface for the embedded checkbox input.

```html
<div class="code-examples">

  <div class="nyc-field">
    <legend>Default</legend>
    <label>
      <input type="checkbox" name="checkbox-default"/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Disabled</legend>
    <label>
      <input type="checkbox" name="checkbox-disabled" disabled/> Label
    </label>
  </div>

  <div class="nyc-field">
    <legend>Disabled&Checked</legend>
    <label>
      <input type="checkbox" name="checkbox-disabled-checked" disabled checked/> Label
    </label>
  </div>
    
</div>
```

--------------------------------

### Secondary Button Implementation (HTML)

Source: https://designsystem.nyc.gov/components/button

Provides examples for creating secondary buttons, similar to primary buttons, using 'button' or 'a' elements. Key attributes include 'button' class and 'data-variant="secondary"'. Examples cover default, disabled, and link button states.

```html
<div class="code-examples">
  <button class="button" data-variant="secondary">Default</button>
  <button class="button" data-variant="secondary" disabled>Disabled</button>
  <a href="#" class="button" data-variant="secondary">Link button</a>
</div>
```

--------------------------------

### HTML Dropdown Select Component Examples

Source: https://designsystem.nyc.gov/components/drop-down-select

Demonstrates the implementation of the drop-down select component in HTML. Includes default, error, and disabled states. This component is intended for lists with 2 to 15 items.

```html
<form class="code-examples">

  <div class="nyc-field">
    <label for="example-default-select">Default Dropdown Label</label>
    <span class="subtitle">Subtitle text</span>
    <select id="example-default-select">
      <option value="">-- Select option --</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>

  <div class="nyc-field nyc-field--error">
    <label for="example-error-select">Error Dropdown Label</label>
    <span class="subtitle">Subtitle text</span>
    <div class="error-message"><i class="i-ph:warning-circle-bold"></i>This field is required.</div>
    <select id="example-error-select">
      <option value="">-- Select option --</option>
      <option value="1">Option 1</option>
    </select>
  </div>

  <div class="nyc-field">
    <label for="example-disabled-select">Disabled Dropdown Label</label>
    <span class="subtitle">Subtitle text</span>
    <select id="example-disabled-select" disabled>
      <option value="">-- Disabled --</option>
    </select>
  </div>
    
</form>
```

--------------------------------

### HTML Combo-box Component - Error State Example

Source: https://designsystem.nyc.gov/components/combo-box

This example shows the combo-box component in an error state. It includes the 'nyc-field--error' class on the container, an error message div with an icon, and the standard combo-box structure. This state is typically used to indicate required fields or validation failures.

```html
<div class="nyc-field nyc-field--error">
  <label for="example-error-select">Error Dropdown Label</label>
  <span class="subtitle">Subtitle text</span>
  <div class="error-message"><i class="i-ph:warning-circle-bold"></i>This field is required.</div>
  <nyc-combo-box>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </nyc-combo-box>
</div>
```

--------------------------------

### Primary Button Implementation (HTML)

Source: https://designsystem.nyc.gov/components/button

Demonstrates how to implement primary buttons using either a 'button' or 'a' element. It includes examples for default, disabled, and link button variations. Ensure the 'button' class and 'data-variant="primary"' attribute are applied.

```html
<div class="code-examples">
  <button class="button" data-variant="primary">Default</button>
  <button class="button" data-variant="primary" disabled>Disabled</button>
  <a href="#" class="button" data-variant="primary">Link button</a>
</div>
```

--------------------------------

### Standalone Checkbox Examples (HTML)

Source: https://designsystem.nyc.gov/components/checkbox-button

Demonstrates the HTML structure for standalone checkboxes, including default, long text, and error states. These are typically used for single selections alongside substantial text, like terms and conditions.

```html
<div class="code-examples">

  <div>
    <legend>Default</legend>
    <div class="nyc-field">
      <input id="checkbox-default" type="checkbox" name="checkbox-default"/>
      <label for="checkbox-default">Default standalone checkbox</label>
    </div>
  </div>

  <div>
    <legend>Long text</legend>
    <div class="nyc-field">
      <input id="checkbox-long-text" type="checkbox" name="checkbox-long-text"/>
      <label for="checkbox-long-text">Long string of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna ac neque posuere fringilla.</label>
    </div>
  </div>

  <div>
    <legend>Error</legend>
    <div class="nyc-field nyc-field--error">
      <input id="checkbox-error" type="checkbox" name="checkbox-error"/>
      <label for="checkbox-error">Standalone checkbox</label>
    </div>
  </div>
    
</div>
```

--------------------------------

### Radio Button Group: With Supporting Text Example (HTML)

Source: https://designsystem.nyc.gov/components/radio-button

Shows a radio button group where each option includes supporting text for more detailed descriptions. This enhances user understanding by providing additional context for each choice.

```html
<div class="nyc-field">
  <legend>Supporting Text</legend>
  <span class="subtitle">Subtitle text</span>
  <label>
    <input type="radio" name="supporting-text-group"/>
    <div>
      <span>Label 1</span>
      <span class="subtitle">Supporting text</span>
    </div>
  </label>
  <label>
    <input type="radio" name="supporting-text-group"/>
    <div>
      <span>Label 2</span>
      <span class="subtitle">Supporting text</span>
    </div>
  </label>
  <label>
    <input type="radio" name="supporting-text-group"/>
    <div>
      <span>Label 3</span>
      <span class="subtitle">Supporting text</span>
    </div>
  </label>
</div>
```

--------------------------------

### Basic Accordion Usage with Custom Element

Source: https://designsystem.nyc.gov/components/accordion

Demonstrates the fundamental usage of the `nyc-accordion` custom element. It requires a heading element as the first child, with subsequent sibling elements forming the accordion panel content. This example shows basic content structure for taxes and fines.

```html
<nyc-accordion>
  <h4>Taxes</h4>
  <p>Content about taxes</p>
  <h4>Fines</h4>
  <p><strong>Parking tickets</strong></p>
  <p>Content about parking tickets</p>
</nyc-accordion>
```

--------------------------------

### HTML: Text Input Component Structure and Examples

Source: https://designsystem.nyc.gov/components/text-input

This snippet demonstrates the HTML structure for the text input component, including default, error, and disabled states. It utilizes the 'nyc-field' class for styling. The error state includes an optional error message element.

```html
<div class="code-examples">
  <div class="nyc-field">
    <label for="default-input">Default Input Label</label>
    <input id="default-input" type="text" />
  </div>

  <div class="nyc-field nyc-field--error">
    <label for="error-input">Error Input Label</label>
    <div class="error-message"><i class="i-ph:warning-circle-bold"></i>This field is required.</div>
    <input id="error-input" type="text" aria-invalid="true" value="" />
  </div>

  <div class="nyc-field">
    <label for="disabled-input">Disabled Input Label</label>
    <input id="disabled-input" type="text" value="Unchangeable value" disabled />
  </div>
</div>
```

--------------------------------

### Instantiate Date Range Input - HTML

Source: https://designsystem.nyc.gov/components/date-input

This snippet shows how to instantiate a date range input using the 'nyc-date-input' custom element with the 'date-range' attribute. This enables selection of both a start and end date.

```html
<nyc-date-input date-range></nyc-date-input>
```

--------------------------------

### HTML Breadcrumb Structure

Source: https://designsystem.nyc.gov/components/breadcrumb

This HTML structure defines a single breadcrumb element with a link to the parent page. It includes ARIA attributes for accessibility and schema markup for SEO. This is a reference example as the library is in beta.

```html
<nav id="breadcrumb" class="breadcrumb" aria-label="Breadcrumb" rule="navigation">
  <ol class="breadcrumb__list" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="breadcrumb__item-link" href="/main/services">Default</a>
    </li>
  </ol>
</nav>
```

--------------------------------

### Radio Button Group: Error State Example (HTML)

Source: https://designsystem.nyc.gov/components/radio-button

Illustrates a radio button group in an error state, featuring an error message and warning icon. This highlights how to provide user feedback for invalid selections.

```html
<div class="nyc-field nyc-field--error">
  <legend>Error</legend>
  <span class="subtitle">Subtitle text</span>
  <div class="error-message"><i class="i-ph:warning-circle-bold"></i>This field is required.</div>
  <label>
    <input type="radio" name="error-group"/> Label 1
  </label>
  <label>
    <input type="radio" name="error-group"/> Label 2
  </label>
  <label>
    <input type="radio" name="error-group"/> Label 3
  </label>
</div>
```

--------------------------------

### Icon Button Implementation (HTML)

Source: https://designsystem.nyc.gov/components/button

Illustrates the implementation of icon buttons using 'button' or 'a' elements. This type requires the 'button' class, 'data-variant="icon"' attribute, and an icon element (e.g., from Iconify). Examples show default, disabled, and link icon buttons.

```html
<div class="code-examples">
  <div>
    <h4>Default</h4>
    <button type="button" class="button" data-variant="icon"><i class="i-ph:caret-right-bold"></i></button>
  </div>
  <div>
    <h4>Disabled</h4>
    <button type="button" class="button" data-variant="icon" disabled><i class="i-ph:caret-right-bold"></i></button>
  </div>
  <div>
    <h4>Link Button</h4>
    <a href="#" class="button" data-variant="icon"><i class="i-ph:caret-right-bold"></i></a>
  </div>
</div>
```