lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The rating input component is used to allow the user to select a rating value within a specified range of values.

Example

code
<script type="module">
  import '@blueprintui/components/include/rating.js';
</script>

<bp-field>
  <label>rating</label>
  <bp-rating value="3"></bp-rating>
</bp-field>

Vertical

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="vertical">
  <bp-field>
    <label>label</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>disabled</label>
    <bp-rating value="3" disabled></bp-rating>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>error</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>success</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-rating value="3" disabled></bp-rating>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>label</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-rating value="3" disabled></bp-rating>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-rating value="3"></bp-rating>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/rating.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/rating.js/+esm';
</script>

Accessibility

  • The rating input component should be fully accessible to users using keyboard navigation.
  • When a user navigates to the rating input component, they should be able to adjust the value by using the arrow keys.
  • The rating input component should also be labeled and provide a clear indication of the current value, minimum and maximum values, and what the range input represents to users.

bp-rating

Events

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
accessordefines the greatest value in the range of permitted values
valuestring | number | FormData | File
minnumber
maxnumber
disabledboolean
requiredboolean
readonlyboolean
multipleboolean
autocompletestring
typestring
namestringrepresents the name of the current
element as a string.
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
sizenumber
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
accessordefines the greatest value in the range of permitted values

CSS Properties

NameTypesDescription
--background
--selected-background