# All files / src/form Fieldset.tsx

100% Statements 90/90
100% Branches 2/2
100% Functions 2/2
100% Lines 90/90

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    911x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef, type FieldsetHTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-fieldset");

    /** @remarks \@since 6.0.0 */
    export interface FieldsetClassNameOptions {
      className?: string;

      /**
       * Set this to `true` to enable the default browser styles for a fieldset.
       *
       * @remarks \@since 6.0.0 This was renamed from `unstyled`.
       * @defaultValue `false`
       */
      browserStyles?: boolean;

      /**
       * @defaultValue `false`
       */
      fullWidth?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function fieldset(options: FieldsetClassNameOptions = {}): string {
      const { className, fullWidth, browserStyles = false } = options;

      return cnb(
        styles({ unstyled: !browserStyles, "full-width": fullWidth }),
        className
      );
    }

    /**
     * **Server Component**
     *
     * @remarks \@since 6.0.0 Removed the `legend`, `legendStyle`,
     * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`
     * yourself manually instead of using a prop.
     */
    export interface FieldsetProps
      extends FieldsetHTMLAttributes<HTMLFieldSetElement>,
        FieldsetClassNameOptions {}

    /**
     * @example
     * Simple Example
     * ```tsx
     * import { Form, Fieldset, Legend } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   return (
     *     <Form>
     *       <Fieldset>
     *         <Legend>Some Title</Legend>
     *         // form components
     *       </Fieldset>
     *     </Form>
     *   );
     * }
     * ```
     */
    export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
      function Fieldset(props, ref) {
        const {
          className,
          fullWidth = false,
          browserStyles = false,
          children,
          ...remaining
        } = props;

        return (
          <fieldset
            {...remaining}
            ref={ref}
            className={fieldset({
              className,
              fullWidth,
              browserStyles,
            })}
          >
            {children}
          </fieldset>
        );
      }
    );