Composables

Legend Element

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

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

Kbd

Style keyboard input elements with configurable background, color, font, border radius, and padding using the useKbdElement composable.

Links

Style anchor elements with configurable color, text decoration, and hover states using the useLinkElement composable.