Disclosure component · Kition Tessera

Playground

Settings most people never change.

Props

title

defaultOpen

children

What is shown

import { Disclosure } from '@kition/tessera-ui'

<Disclosure
  title="Advanced"
  defaultOpen
>
  Settings most people never change.
</Disclosure>

When to use

Advanced settings most people do not need.

Examples

Closed and open

1,240 credits this month

disclosure.tsx

import { Disclosure, TextInput } from '@kition/tessera-ui'

export default function Demo() {
  return (
    <div style={{ maxWidth: 360 }}>
      <Disclosure title="Advanced settings">
        <TextInput size="md" defaultValue="0.7" aria-label="Temperature" />
      </Disclosure>
      <Disclosure title="Usage" defaultOpen>
        1,240 credits this month
      </Disclosure>
    </div>
  )
}

Props

Disclosure

A section that opens and closes under its title.

Prop	Type	Default	Description
`title`required	`ReactNode`	—
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	—	Open, when the screen holds the state (with `onOpenChange`).
`onOpenChange`	`(open: boolean) => void`	—
`onClose`	`() => void`	—	Called when the person closes it.
`children`	`ReactNode`	—
`className`	`string`	—