Question

A question is anything that asks for information, invites a response, tests knowledge, etc. Examples include FAQ entries, quiz prompts, survey questions, forum questions, and interview questions.

This headless component renders a <div> with class question. The consumer supplies the question text and any related content (answer slot, metadata, action buttons) as children.

Props

label: string (optional) -- accessible label for the question
children: slot (required) -- question content (heading, body, related answers, metadata)
...restProps: Any additional HTML attributes

ARIA

aria-label -- describes the question for screen readers when no visible heading is present

When to Use

Use for FAQ entries that pair a question with one or more answers.
Use for quiz, survey, or knowledge-check prompts.
Use for forum-style threads where each thread starts with a question.

Related components

answer — an answer is anything that responds to a question, request, action, etc.
comment — a comment is anything that expresses an opinion, observation, explanation, etc.

Example

What time does the clinic open?

Show Svelte source

// In your Svelte component:
import Question from "lily-design-system-svelte-headless/components/Question/Question.svelte";

<Question>
  <!-- content -->
</Question>