SuggestionChip

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { SuggestionChip, SuggestionGroup } from '@nizivo/react/unstable/suggestion-chip';

export function SuggestionChipExample(): JSX.Element {
  return (
    <SuggestionGroup style={{ maxInlineSize: 560 }}>
      <SuggestionChip>Write a product description</SuggestionChip>
      <SuggestionChip>Summarise this week’s orders</SuggestionChip>
      <SuggestionChip>Find slow-moving stock</SuggestionChip>
      <SuggestionChip>Draft a launch post</SuggestionChip>
    </SuggestionGroup>
  );
}

ImportCopy Anchor Link

import { SuggestionChip, SuggestionGroup } from '@nizivo/react/unstable/suggestion-chip';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/suggestion-chip.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript of its own: each chip is a button, and what its onClick does is your component's code. How to choose.

Fill, don't sendCopy Anchor Link

A chip puts its words in the composer; people still press send. Do that in onClick, and move focus to the composer so they can edit. Keep about five in view at most, under an empty composer or after an answer as follow-ups.

The groupCopy Anchor Link

SuggestionGroup wraps the chips with 8 px between them and is a group named "Suggestions" (labels.label, or your own aria-label or aria-labelledby).

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SuggestionChipProps type

import type { SuggestionChipProps } from '@nizivo/react/unstable/suggestion-chip'

The props of SuggestionChip, listed above.

SuggestionGroupLabels type

import type { SuggestionGroupLabels } from '@nizivo/react/unstable/suggestion-chip'

SuggestionGroup's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
labelrequired	string	'Suggestions'	The group's accessible name, unless aria-label or aria-labelledby names it.

SuggestionGroupProps type

import type { SuggestionGroupProps } from '@nizivo/react/unstable/suggestion-chip'

The props of SuggestionGroup, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-suggestion-chip, .nz-suggestion-chip-icon, .nz-suggestion-chip-label, .nz-suggestion-group.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• suggestion-chip: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.