Chip

import '@rhds/elements/rh-chip/rh-chip.js';

<rh-chip>Chip</rh-chip>

import '@rhds/elements/rh-chip/rh-chip-group.js';

<rh-chip-group accessible-label="Various attributes and states:">
  <rh-chip value="checked" checked="">I am checked</rh-chip>
  <rh-chip value="i-am-disabled" disabled="">I am disabled</rh-chip>
  <rh-chip value="devops">Custom value unchecked</rh-chip>
  <rh-chip value="i-am-disabled-checked" disabled="" checked="">I am disabled &amp; checked</rh-chip>
</rh-chip-group>

import '@rhds/elements/rh-chip/rh-chip-group.js';

<rh-chip-group>
  <rh-chip>Edge</rh-chip>
  <rh-chip checked="">AI/ML</rh-chip>
  <rh-chip>DevOps</rh-chip>
</rh-chip-group>

import '@rhds/elements/rh-chip/rh-chip-group.js';

<rh-chip-group accessible-label="Custom filter text">
  <rh-chip checked="">Bluetooth</rh-chip>
  <rh-chip>Wi-Fi</rh-chip>
  <rh-chip>RFID</rh-chip>
  <rh-chip checked="" disabled="">Chip and pin</rh-chip>
  <span slot="clear-all">Clear technologies</span>
</rh-chip-group>

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-chip/rh-chip-group.js';

<rh-context-demo>
  <rh-chip-group>
    <rh-chip>Edge</rh-chip>
    <rh-chip checked="">AI/ML</rh-chip>
    <rh-chip>DevOps</rh-chip>
    <rh-chip disabled="">Disabled</rh-chip>
  </rh-chip-group>
</rh-context-demo>

import '@rhds/elements/rh-chip/rh-chip-group.js';

<rh-chip-group accessible-label="Filter technologies:">
  <rh-chip>Edge</rh-chip>
  <rh-chip checked="">AI/ML</rh-chip>
  <rh-chip>OpenShift</rh-chip>
  <rh-chip disabled="">COBOL</rh-chip>
</rh-chip-group>

import '@rhds/elements/rh-chip/rh-chip-group.js';

const getChip = document.querySelector('rh-chip');
getChip.addEventListener('change', chipChecked);

// Replace with custom chip-checked event logic:
function chipChecked() {
  window.alert('A chip was checked/unchecked.')
}

<rh-chip-group>
  <rh-chip value="custom-value">Check me</rh-chip>
</rh-chip-group>

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-chip/rh-chip-group.js';
const form = document.getElementById('chip-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  const data = new FormData(form)
  form.elements.output.textContent = '';
  for (const [k, v] of data)
    form.elements.output.textContent += `${k}: ${v}\n`;
})

<form id="chip-form">
  <rh-chip-group>
    <rh-chip name="edge">Edge</rh-chip>
    <rh-chip name="ai" checked="">AI/ML</rh-chip>
    <rh-chip name="devops">DevOps</rh-chip>
  </rh-chip-group>
  <hr>
  <rh-button type="submit">Submit</rh-button>
  <output name="output"></output>
</form>

import '@rhds/elements/rh-chip/rh-chip-group.js';
import '@rhds/elements/rh-chip/rh-chip.js';

<rh-chip-group size="sm">
  <span slot="accessible-label">Filter by (small):</span>
  <rh-chip>Automation</rh-chip>
  <rh-chip checked="">Security</rh-chip>
  <rh-chip>Containers</rh-chip>
</rh-chip-group>

<rh-chip-group>
  <rh-chip>Open Source</rh-chip>
  <rh-chip checked="">ARO</rh-chip>
  <rh-chip>RHEL</rh-chip>
</rh-chip-group>