Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Collapsible UI for object fields similar to array items

Đang mở
  • Có gì không ổn?
#1,476 0 bình luận 1 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
38/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start by reading the existing fields.object and fields.array implementations to compare their current rendering and expansion behavior. Determine how a collapsible object option should be represented alongside the proposed label and layout settings, then verify that nested fields can be hidden and revealed while preserving the existing object data shape.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Currently, fields.object() displays all nested fields inline, which can create cluttered UIs when objects contain many fields. In contrast, fields.array() provides a clean "Add" button interface where each item can be expanded/collapsed.

Current Behavior

Object fields always display all nested fields inline:

fields.object({
  image: fields.image({ /* ... */ }),
  alt: fields.text({ /* ... */ }),
  title: fields.text({ /* ... */ }),
  caption: fields.text({ /* ... */ }),
})

Result: All 4 fields appear stacked vertically, taking up significant screen space.

Desired Behavior

Provide an option to make object fields collapsible, similar to array items:

fields.object(
  {
    image: fields.image({ /* ... */ }),
    alt: fields.text({ /* ... */ }),
    title: fields.text({ /* ... */ }),
    caption: fields.text({ /* ... */ }),
  },
  {
    label: 'Featured Image',
    layout: 'collapsible', // or 'expandable'
  }
)

This would display a collapsed fieldset with a label that expands to reveal the nested fields when clicked, reducing visual clutter.

Use Case

When building image fields with metadata (alt text, title, caption), we want a clean UI that:

  • Shows a single line item when collapsed ("Featured Image")
  • Expands to show all fields when the editor clicks to add/edit
  • Similar to how array items work, but for a single object

Current Workaround

Some users work around this by wrapping objects in fields.array() with validation: { length: { max: 1 } }, but this:

  • Creates awkward array syntax in content files
  • Requires array index access in code (image[0])
  • Is semantically incorrect (using array for single item)

Additional Context

This UI pattern is common in form builders and CMS tools (WordPress ACF flexible content, Contentful complex fields) where grouped fields can be toggled open/closed to reduce visual complexity.

Note: I'm interested in contributing to Keystatic and would be happy to implement this feature if there's interest from the maintainers. Please let me know if this aligns with the project roadmap.

Ngôn ngữ chính
TypeScript
Star
2.5k
Fork
176
Merge trung bình
5 giờ 46 phút
Pull request đã merge (30 ngày)
3

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Thinkmill/keystatic

Tất cả issue của Thinkmill/keystatic

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.