Forms & Tables

Legend Element

Style legend elements for proper form layout using the useLegendElement composable.

Part of the Global Preset:useLegendElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's legend option. For most projects, applying it via the preset is the recommended approach.

Overview

The useLegendElement composable styles the legend element for consistent form layout. It floats the legend to span the full width and applies a clearfix on the following sibling element. This is a config-free composable with no customization options.

`useLegendElement`

function useLegendElement(s: Styleframe): void

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useLegendElement } from '@styleframe/theme';

const s = styleframe();

useLegendElement(s);

export default s;

styleframe/index.css

legend {
    float: left;
    width: 100%;
    padding: 0;
}

legend + * {
    clear: left;
}

This composable takes no configuration options, creates no CSS custom properties, and returns void. The legend + * rule clears the float on the element immediately following the legend to prevent layout issues.

Edit this pageorReport an issue

Caption

Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.

Output

Style output and sample output elements using the useOutputElement and useSampElement composables.