Chip 可选标签

可选中或者可移除的条目。

'use client'

import { useState } from 'react'
import { Chip, Inline } from '@hina-ui/react'

const genres = ['科幻', '奇幻', '日常', '悬疑', '恋爱']

export default function Demo() {
  const [picked, setPicked] = useState(['科幻', '日常'])

  function toggle(genre: string, on: boolean) {
    setPicked(on ? [...picked, genre] : picked.filter(item => item !== genre))
  }

  return (
    <Inline>
      {genres.map(genre => (
        <Chip
          key={genre}
          selectable
          selected={picked.includes(genre)}
          onSelectedChange={value => toggle(genre, value)}
        >
          {genre}
        </Chip>
      ))}
    </Inline>
  )
}

tsx

用法

import { Chip } from '@hina-ui/react'

条目有两种用法：selectable 使条目可以选中，removable 为条目添加移除按钮，两者只能取其一。不需要交互的短标注使用 Tag。

科幻

'use client'

import { useState } from 'react'
import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  const [finished, setFinished] = useState(true)
  const [kept, setKept] = useState(true)

  return (
    <Inline>
      <Chip selected={finished} onSelectedChange={setFinished} selectable>
        已完结
      </Chip>
      {kept && (
        <Chip removable onRemove={() => setKept(false)}>
          科幻
        </Chip>
      )}
    </Inline>
  )
}

tsx

示例

可选中

设置 selectable 后条目渲染为按钮，selected / onSelectedChange 绑定选中状态。选中的条目使用强调色，并在文字前显示勾选图标。

'use client'

import { useState } from 'react'
import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  const [finished, setFinished] = useState(true)
  const [translated, setTranslated] = useState(false)

  return (
    <Inline>
      <Chip selected={finished} onSelectedChange={setFinished} selectable>
        已完结
      </Chip>
      <Chip selected={translated} onSelectedChange={setTranslated} selectable>
        有汉化
      </Chip>
    </Inline>
  )
}

tsx

可移除

设置 removable 后条目末尾显示移除按钮，点击时调用 onRemove，条目本身不可点击。

科幻校园恋爱群像

'use client'

import { useState } from 'react'
import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  const [tags, setTags] = useState(['科幻', '校园', '恋爱', '群像'])

  return (
    <Inline>
      {tags.map(tag => (
        <Chip key={tag} removable onRemove={() => setTags(tags.filter(item => item !== tag))}>
          {tag}
        </Chip>
      ))}
    </Inline>
  )
}

tsx

变体与色调

soft 带浅色底，outline 只有边框，默认为 soft。色调有 neutral 与 accent 两种，默认为 neutral。

import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline>
      <Chip selectable>soft</Chip>
      <Chip selectable tone="accent">
        soft accent
      </Chip>
      <Chip selectable variant="outline">
        outline
      </Chip>
      <Chip selectable variant="outline" tone="accent">
        outline accent
      </Chip>
    </Inline>
  )
}

tsx

尺寸

md 与小号按钮同高，sm 用于输入框内与密集的列表。

小号中号

import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <Chip size="sm" selectable selected>
        小号
      </Chip>
      <Chip size="sm" removable>
        小号
      </Chip>
      <Chip selectable selected>
        中号
      </Chip>
      <Chip removable>中号</Chip>
    </Inline>
  )
}

tsx

带图标

图标放入 icon 属性。可选中的条目选中后，图标的位置改为显示勾选图标。

'use client'

import { useState } from 'react'
import { Flame, Star } from 'lucide-react'
import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  const [hot, setHot] = useState(true)
  const [starred, setStarred] = useState(false)

  return (
    <Inline>
      <Chip selected={hot} onSelectedChange={setHot} selectable icon={<Flame />}>
        热门
      </Chip>
      <Chip selected={starred} onSelectedChange={setStarred} selectable icon={<Star />}>
        收藏
      </Chip>
      <Chip removable icon={<Star />}>
        收藏
      </Chip>
    </Inline>
  )
}

tsx

禁用

disabled 的条目不响应点击，移除按钮也一并禁用。

不可移除

import { Chip, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline>
      <Chip selectable disabled>
        未选中
      </Chip>
      <Chip selectable selected disabled>
        已选中
      </Chip>
      <Chip removable disabled>
        不可移除
      </Chip>
    </Inline>
  )
}

tsx

作为链接

as 设为 a 并给出 href，条目成为链接，带悬停与按下反馈。接入应用路由时，在客户端组件中把 as 设为 next/link 的 Link 并给出 href，保留链接语义并使用客户端导航。

科幻校园恋爱

import { Chip, Inline } from '@hina-ui/react'

const href = '/components/tag'

export default function Demo() {
  return (
    <Inline>
      <Chip as="a" href={href}>
        科幻
      </Chip>
      <Chip as="a" href={href}>
        校园
      </Chip>
      <Chip as="a" href={href} variant="outline">
        恋爱
      </Chip>
    </Inline>
  )
}

tsx

行为

可选中的条目是原生按钮，点击、回车键与空格键都可以切换选中状态。
选中后文字前显示勾选图标；带 icon 属性时，图标改为显示勾选图标。
移除按钮聚焦时，回车键、空格键、退格键与删除键都会调用 onRemove；点击移除按钮不会触发条目的点击。
selectable 与 removable 同时设置时，开发环境输出警告并忽略 removable。
禁用的条目不响应点击，也不进入键盘焦点序列。

API

Props

属性	类型	默认值	说明
`selectable`	`boolean`	`false`	是否可以选中
`selected`	`boolean`	`false`	选中状态，可受控
`removable`	`boolean`	`false`	是否显示移除按钮
`variant`	`'soft' \| 'outline'`	`'soft'`	视觉样式
`tone`	`'neutral' \| 'accent'`	`'neutral'`	色调
`size`	`'sm' \| 'md'`	`'md'`	尺寸
`disabled`	`boolean`	`false`	是否禁用
`ripple`	`boolean`	`true`	按下时是否显示波纹
`as`	`string`	—	渲染的标签，可选中时默认为 `button`，否则为 `span`
`className`	`string`	—	追加至根元素的类名

回调

回调	参数	说明
`onSelectedChange`	`selected: boolean`	选中状态变化
`onRemove`	—	点击了移除按钮

内容属性

属性	说明
`children`	条目的文字
`icon`	文字前的图标

用法

示例

可选中

可移除

变体与色调

尺寸

带图标

禁用

作为链接

行为

无障碍

API

Props

回调

内容属性