Chip

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

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

import { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Chip>Chip</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 { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ChipGroup accessible-label="Various attributes and states:">
    <Chip value="checked" checked>I am checked</Chip>
    <Chip value="i-am-disabled" disabled>I am disabled</Chip>
    <Chip value="devops">Custom value unchecked</Chip>
    <Chip value="i-am-disabled-checked" disabled checked>I am disabled & checked</Chip>
  </ChipGroup>
);

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 { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ChipGroup>
    <Chip>Edge</Chip>
    <Chip checked>AI/ML</Chip>
    <Chip>DevOps</Chip>
  </ChipGroup>
);

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 { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ChipGroup accessible-label="Custom filter text">
    <Chip checked>Bluetooth</Chip>
    <Chip>Wi-Fi</Chip>
    <Chip>RFID</Chip>
    <Chip checked disabled>Chip and pin</Chip>
    <span slot="clear-all">Clear technologies</span>
  </ChipGroup>
);

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 { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <ChipGroup>
      <Chip>Edge</Chip>
      <Chip checked>AI/ML</Chip>
      <Chip>DevOps</Chip>
      <Chip disabled>Disabled</Chip>
    </ChipGroup>
  </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 { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ChipGroup accessible-label="Filter technologies:">
    <Chip>Edge</Chip>
    <Chip checked>AI/ML</Chip>
    <Chip>OpenShift</Chip>
    <Chip disabled>COBOL</Chip>
  </ChipGroup>
);

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 { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ChipGroup>
    <Chip value="custom-value">Check me</Chip>
  </ChipGroup>
);

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 { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <form id="chip-form">
    <ChipGroup>
      <Chip name="edge">Edge</Chip>
      <Chip name="ai" checked>AI/ML</Chip>
      <Chip name="devops">DevOps</Chip>
    </ChipGroup>
    <hr />
    <Button type="submit">Submit</Button>
    <output name="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>

import { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";
import { ChipGroup } from "@rhds/elements/react/rh-chip-group/rh-chip-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ChipGroup size="sm">
    <span slot="accessible-label">Filter by (small):</span>
    <Chip>Automation</Chip>
    <Chip checked>Security</Chip>
    <Chip>Containers</Chip>
  </ChipGroup>
  <ChipGroup>
    <Chip>Open Source</Chip>
    <Chip checked>ARO</Chip>
    <Chip>RHEL</Chip>
  </ChipGroup>
);