@sb1/ffe-form

@sb1/ffe-form

Install

npm install --save @sb1/ffe-core @sb1/ffe-form

Usage

Full documentation on form usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/.

@import 'path/to/node_modules/@sb1/ffe-form/less/form';

Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

@import '~@sb1/ffe-form/css/form.css';

See also @sb1/ffe-form-react.

Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in less/theme.less. These properties in turn depend on a base theme defined in ffe-core.

If your project uses the ffe-core, you're probably good to go. If not, make sure to import the core properties in theme.less:

@import '~@sb1/ffe-core/less/theme';

This package consists of several components, each with their own styling. If you choose to use only one component, e.g. checkbox.less in your app, make sure to also import theme.less in order to have access to the necessary CSS properties.

@import '~@sb1/ffe-form/less/theme';
@import '~@sb1/ffe-form/less/checkbox';

Development

To start a local development server, run the following from the designsystem root folder:

npm install
npm run build
npm start

A local instance of Storybook with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.