Options panel

An elegant way to display options in an options page, with a contained width and options for label and help text.

<OptionsPanel>
	<OptionsPanelSection>
		<span>This is demo content</span>
	</OptionsPanelSection>
</OptionsPanel>

For the complete list of props, use your IDE's autocomplete functionality.

Multiple sections

<OptionsPanel>
	<OptionsPanelSection>
		<span>Section 1 content</span>
	</OptionsPanelSection>
	<OptionsPanelSection>
		<span>Section 2 content</span>
	</OptionsPanelSection>
</OptionsPanel>

Title, subtitle, and help text

<OptionsPanel
	title='Demo panel title'
	subtitle='Demo panel subtitle'
	help='Demo panel help'
>
	<OptionsPanelSection>
		<span>Section content</span>
	</OptionsPanelSection>
</OptionsPanel>

Header

To augment the OptionsPanels, you can add an OptionsPanelHeader to nicely divide the sections of your options pages.

<OptionsPanelHeader
	title='Global settings'
/>

You can also add actions to the right.

<OptionsPanelHeader
	title='Global settings'
	actions={
		<Button icon={icons.save}>Save</Button>
	}
/>

Additional content can be added below the title by passing it as children.

<OptionsPanelHeader
	title='Global settings'
>
	Lorem ipsum dolor sit amet.
</OptionsPanelHeader>

You can also limit the width of the header using the limitWidth prop, change the heading level of the title with the level prop, or make it sticky with the sticky prop.