Disclosure

Disclosure renders native details and summary elements.

github.com/fastygo/templ/ui

Summary

Disclosure renders native details and summary elements.

Use Cases

Render FAQ rows

Render compact settings and optional form sections

Semantics

Disclosure uses native details open state

Summary must be the visible trigger

Example variant.default

More options

Hidden content.

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Disclosure(ui.DisclosureProps{}) {
		@ui.Summary(ui.SummaryProps{}) { More options }
		@ui.Text(ui.TextProps{}, "Hidden content.")
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Disclosure(ui.DisclosureProps{}) {
		@ui.Summary(ui.SummaryProps{}) { More options }
		@ui.Text(ui.TextProps{}, "Hidden content.")
	}
}

Example state.open

Details

Visible content.

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Disclosure(ui.DisclosureProps{Open: true}) {
		@ui.Summary(ui.SummaryProps{}) { Details }
		@ui.Text(ui.TextProps{}, "Visible content.")
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Disclosure(ui.DisclosureProps{Open: true}) {
		@ui.Summary(ui.SummaryProps{}) { Details }
		@ui.Text(ui.TextProps{}, "Visible content.")
	}
}

API

Open · bool — role: state

Size · string — role: density; enum: sm|default|lg; default: default

Variant · string — role: appearance; enum: default|ghost|card|unstyled; default: default; source: ui.disclosure.DisclosureVariants