componente · @solu30/ui-kit/input
CollapsibleSection
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { CollapsibleSection } from '@solu30/ui-kit/input'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| title | sí | string | Section title |
| subtitle | opcional | string | Secondary text after title |
| icon | opcional | ReactNode | Optional icon to display before the title |
| number | opcional | number | Numbered circle that replaces icon |
| badge | opcional | string | CollapsibleBadge | Optional badge — string for accent pill, object for semantic colors |
| defaultOpen | opcional | boolean | Whether the section is open by default (uncontrolled mode) |
| isOpen | opcional | boolean | Controlled open state — if provided, component is controlled |
| onToggle | opcional | () => void | Callback when toggle is clicked (required for controlled mode) |
| allowOverflow | opcional | boolean | Allow content to overflow (useful for dropdowns inside) |
| disableCollapse | opcional | boolean | Disable collapsing — always open, no chevron |
| forceOpen | opcional | boolean | Imperative open via useEffect |
| actions | opcional | ReactNode | Right-side interactive slot (before chevron) |
| mobileActionsInContent | opcional | boolean | Move actions to content area on mobile screens |
| rightInfo | opcional | ReactNode | Right-side read-only info |
| compact | opcional | boolean | Smaller padding and font |
| children | sí | ReactNode | Section content |
| className | opcional | string | Additional CSS class for the wrapper |
| headerClassName | opcional | string | Additional CSS class for the header row |
| contentClassName | opcional | string | Additional CSS class for the content wrapper |
Ejemplo del paquete
// Uncontrolled
<CollapsibleSection title="Advanced Options" defaultOpen>
<p>Content here</p>
</CollapsibleSection>
// Controlled
<CollapsibleSection title="Filters" isOpen={open} onToggle={() => setOpen(!open)}>
<FilterForm />
</CollapsibleSection>
// With semantic badge
<CollapsibleSection title="Alerts" badge={{ type: 'warning', text: '3 issues' }}>
<AlertList />
</CollapsibleSection>
// Numbered, compact, with actions
<CollapsibleSection title="Step 1" number={1} compact actions={<Button size="sm">Edit</Button>}>
<StepForm />
</CollapsibleSection>Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.