Skip to main content

PropField

Display a prop field with a name, type, and description.

Use the PropField component to annotate props/params in your documentation.

Usage

document.md
		<script>
	import { PropField } from "@svecodocs/kit";
</script>
 
<PropField name="checked" type="boolean" required defaultValue="false">
	<!-- Space here-->
	The checked state of the checkbox.
	<!-- Space here-->
</PropField>

Examples

Basic

checked
type: boolean
The checked state of the checkbox.
default: false
required

Object

You can use PropField in combination with the Collapsible component to represent more complex types.

document.md
		<script>
	import { PropField, Collapsible } from "@svecodocs/kit";
</script>
 
<PropField name="options" type="CheckboxOptions" required>
	<!-- Space here -->
	Configuration options to customize the behavior of the `Checkbox` component.
	<!-- Space here -->
	<Collapsible title="properties">
		<PropField name="width" type="number" required>
			The width to apply to the checkbox.
		</PropField>
		<PropField name="height" type="number" required defaultValue="20">
			The height to apply to the checkbox.
		</PropField>
	</Collapsible>
</PropField>
options
type: CheckboxOptions

Configuration options to customize the behavior of the Checkbox component.

required

Props

name
type: string
The name of the prop.
required
type
type: string
The type of the prop.
required
defaultValue
type: string
The default value of the prop.
required
type: boolean
Whether the prop is required.
default: false
children
type: Snippet
The description/content to display within the prop field.